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

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数据文本绑定：{{变量名称}}，代码实例：

 {{name}} 

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

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

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

Angular6.X 绑定div标签属性数据方式1

Angular6.X 绑定div标签属性数据方式2

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

public user = {name:"chait"};

{{ user.name }}

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

  数组的申明：

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

    
 {{item}} 

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

    
{{item}}-----------------{{i}}

3.事件：

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

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

单机事件

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

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

 //参数输入事件对象

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

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

//TS代码
sign:boolean = false;

//html标签
ngIf命令判断，true=》show 

5.双向数据绑定：

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

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

   5.3使用双向数据绑定： 

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

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

 {{query}} 

  界面显示：