一、属性绑定 [ ]

  1. <img [src]="imageUrl" >

二、指令ngFor,ngIf

vscode插件：Angular Snippets (Version 8)

  1. <div *ngFor="let item of arr">{{item.name}}</div>
  2. <div *ngIf="isShow">你好</div>

三、事件

3-1 (click)

  1. //.html
  2. <p (click)="handleClick()">{{msg}}</p>
  1. //.component.ts
  2. export class HeaderComponent implements OnInit {
  3.   ....
  4.   public msg:string ="我喜欢写代码"
  5.   constructor() { }
  6.   ngOnInit() {
  7.   }
  8.   handleClick(){
  9.     this.msg = "change"
  10.   }
  11. }

3-2（keyup）

  1. //.html
  2. <input type="text" (keyup)="handleEnter($event)">
  1. //.component.ts
  2. handleEnter(event:any){
  3.     console.log(event.keyCode)
  4. }

3-3 (keyup.enter)

  1. //component.ts
  2. handleEnter(value:string){
  3.     console.log(value)
  4. }

四、双向数据绑定

4-1app.module.ts中配置

  1. import {FormsModule} from '@angular/forms'
  2. imports: [
  3.     BrowserModule,
  4.     FormsModule
  5.   ],

4-2 组件中使用

  1. <input type="text"
  2.  [(ngModel)]="msg">

4-4 (change)

  1. //.html
  2. <input type="text"
  3. (change)="handleChange($event)"
  4.  [(ngModel)]="msg">
  1. //component.ts
  2. handleChange(e){
  3.     console.log(e.target)
  4.   }

4-5 (ngModelChange)

只要ngModel依赖的值改变的时候,就会触发
ngModel一定要写在ngModelChange的前面

  1. //.html
  2. <input type="checkbox" 
  3. [(ngModel)]="checked"
  4. (ngModelChange)="handleChange()"
  5. >
  1. //.component.ts
  2. public checked:boolean = true;
  3. handleChange(){
  4.     console.log(this.checked);
  5.   }

五、ant-design

自动构建

  1. ng add ng-zorro-antd