基于TypeScript的Angular6.X系列学习笔记-Angular CLI常用命令与数据绑定

最新推荐文章于 2024-03-09 20:39:01 发布

ChaITSimpleLove

最新推荐文章于 2024-03-09 20:39:01 发布

阅读量874

点赞数

基于TypeScript的Angular6.X系列学习专栏收录该内容

20 篇文章

订阅专栏

本文深入探讨AngularCLI脚手架的常用命令，包括组件、指令、管道等创建方法，并详细解析Angular中的数据绑定技术，如文本绑定、HTML标签绑定、属性绑定、对象绑定、循环遍历、事件绑定及条件判断等，同时介绍了双向数据绑定的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.Angular CLI常用命令：

Angular CLI脚手架常用命令
脚手架名称	用法命令	解释说明
零件	`ng g component my-new-component`
指示	`ng g directive my-new-directive`
管	`ng g pipe my-new-pipe`
服务	`ng g service my-new-service`
类	`ng g class my-new-class`
守卫	`ng g guard my-new-guard`
接口	`ng g interface my-new-interface`
枚举	`ng g enum my-new-enum`
模	`ng g module my-module`

// TODO https://www.npmjs.com/package/@angular/cli

2.数据绑定：

2.1数据文本绑定：{{变量名称}}，代码实例：

<h3> {{name}} </h3>

2.2html标签绑定，代码实例：

this.h="<h2>这是h2标签，用[innerHTML]来解析</h2>";

<div [innerHTML]="h"></div>

2.3属性数据绑定：代码实例：

<div id="{{id}}">Angular6.X 绑定div标签属性数据方式1</div>

<div [title]="msg">Angular6.X 绑定div标签属性数据方式2</div>

2.4对象数据绑定：代码实现：

public user = {name:"chait"};

<span>{{ user.name }}</span>

2.5数据循环遍历：* ngFor，代码如下：

数组的申明：

//TS中代码，数组申明
public json = ["aaaaaaaaaaa","bbbbbbbbbb","ccccccccccc"]; 
list1:Array<string> = ["bbbbbbb","tttttttt","aaaaaaaaaa"];
list2:string[] = ["bbbbbbb","tttttttt","aaaaaaaaaa"];

<ul>
    <li *ngFor="let item of json"> {{item}} </li>
</ul>

遍历的时候设置键（指数）：

<ul>
    <li *ngFor="let item of json;let i = index;">{{item}}-----------------{{i}}</li>
</ul>

3.事件：

3.1单机事件（点击），命令(click)="自定义方法名()"：

//自定义方法或函数
getMsg(){
   alert("OKey!");
}

<button (click)="getMsg()">单机事件</button>

3.2键盘操作事件，命令(keyup)="keyupFun($event)"; //事件对象，捕获键盘key

keyupFun(e){
    console.log(e);
    if(e.keyCode==13){
        alert("按下了回车键（Enter）");
    }
}

<input type="text" (keyup)="keyupFun($event)" /> //参数输入事件对象

事件命令：(event) = "onEvent()"，(事件名称) = "自定义方法名称()";

4.条件判断，命令 *ngIf：

//TS代码
sign:boolean = false;

//html标签
<div id="show" *ngIf="sign!=sign">ngIf命令判断，true=》show </div>

5.双向数据绑定：

5.1引入：import { FormsModule } from '@angular/forms'; //FormsModule双向数据绑定；

5.2声明依赖模块，在@NgModule 的 imports 添加 FormsModule；

5.3使用双向数据绑定：<input type="text" [(ngModel)]="query" />

  //双向数据绑定演示
  query:string;

  //构造函数
  constructor() { 
    this.query = "双向数据绑定演示";
  }

<input type="text" [(ngModel)]="query"> {{query}} <br/><br/>

界面显示：