Angular4指令(Directive)

1.Angular4指令分类

• 组件（Component directive）：UI组件，继承于Directive；
• 属性指令（Attribute directive）：改变组件的样式；
• 结构指令（Structural directive）：改变DOM布局；

2.组件（Component directive）

• 代码实例

  import { Component } from '@angular/core';
  
  @Component({
  selector: 'app-root', // 定义组件在HTML代码中匹配的标签
  template: `
  Hello {{World}}
  `, // 指定组件关联的内联模板
  })
  export class AppComponent  {
  name = 'World'; 
  }

• 组件的组成：@Component()里里里面的Template(HTML,CSS)；以及export class组件里的属性和方法；
  

3.属性指令（Attribute directive） ：主要改变组件的样式

• 主要包括ngStyle 和 ngClass；

  //ngStyle
  
      
  
         {{ person.name }} ({{person.country}})
      
  
  //ngClass
  

4.结构指令（Structural directive） ：主要改变DOM的结构

• 主要包括ngIf 、 ngFor 和 ngSwitch；

  //ngIf
  {{ person.name }} ({{person.country}})
  //ngFor
  {{person.name}}
  //ngSwitch
  
  
      {{ person.age}}
  
   
  
      {{ person.age}} 
  
  
    {{ person.age}}