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: `<h1>Hello {{World}}</h1>`, // 指定组件关联的内联模板 }) export class AppComponent { name = 'World'; }
- 组件的组成:
@Component()
里里里面的Template(HTML,CSS)
;以及export class
组件里的属性和方法;
3.属性指令(
Attribute directive
) :主要改变组件的样式
-
主要包括
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
的结构
-
主要包括
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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。