1.Angular4指令分类

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

2.组件（Component directive）

@H_301_5@

代码实例

import { Component } from '@angular/core';

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

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

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

@H_301_5@

主要包括ngStyle 和 ngClass；

//ngStyle
<ul *ngFor="let person of people">
    <li [style.color]="getColor(person.country)">
       {{ person.name }} ({{person.country}})
    </li>
</ul>
//ngClass
<div [ngClass]="{'text-success': person.country === 'CN'}"></div>

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

@H_301_5@

主要包括ngIf 、 ngFor 和 ngSwitch；

//ngIf
<div *ngIf="person.country === 'CN'">{{ person.name }} ({{person.country}})</div>
//ngFor
<div *ngFor="let person of people">{{person.name}}</div>
//ngSwitch
<ul [ngSwitch]='person.name'>
<li *ngSwitchCase="Lily" class='text-success'>
    {{ person.age}}
</li>
 <li *ngSwitchCase="'Tom'" class='text-secondary'>
    {{ person.age}} 
</li>
<li *ngSwitchDefault class='text-primary'>
  {{ person.age}} 
</li>
</ul>