指令概览

1. 组件：拥有模板的指令
2. 结构型指令：通过添加和移除 DOM 元素改变 DOM 布局的指令
3. 属性型指令：改变元素、组件或其它指令的外观和行为的指令

   组件指令：最常用。 结构型指令：修改视图的结构。例：ngFor、ngIf 属性型指令：改变一个元素的外观或行为。例：ngStyle

结构型指令

内置结构型指令

NgIf

<!--根据ngIf表达式的值，从DOM中添加或删除元素-->
<app-item-detail *ngIf="isActive"></app-item-detail>

NgFor

<div *ngFor="let student of students;let i=index">{{i}}{{student.name}}</div>

export class DemoComponent{
    students: {id:number; name: string}[] = [];
  ngOnInit(): void{
       for (let i = 10; i < 20; i++) {
      this.students.push({ id: i, name: `学生数据${i}` });
    }
  }
}

NgSwitch

<div [ngSwitch]="classes">
  <p *ngSwitchCase="1" >一班</p>
  <p *ngSwitchCase="2" >一班</p>
  <p *ngSwitchCase="3" >三班</p>
  <p *ngSwitchCase="4" >四班</p>
  <p *ngSwitchDefault >不存在该班</p>
</div>

NgSwitch 是属性型指令，ngSwitchCase 和 ngSwitchDefault 是结构型指令

属性型指令

内置属性型指令

• NgClass：添加和删除一组 CSS 类。
• NgStyle：添加和删除一组 HTML 样式。
• NgModel：将数据双向绑定添加到 HTML 表单元素。

  NgClass

  ```html
  This div is special

currentClasses: { ‘saveable’: true, ‘modified’: false, ‘special’: true };

currentStyles: { ‘font-style’: this.canSave ? ‘italic’ : ‘normal’, ‘font-weight’: !this.isUnchanged ? ‘bold’ : ‘normal’, ‘font-size’: this.isSpecial ? ‘24px’ : ‘12px’ };

<a name="wXNyL"></a>
### [(ngModel)]
```html
<input [(ngModel)]="name">
export class DemoComponent implements OnInit{
    name = '字符串';
}