脚本宝典收集整理的这篇文章主要介绍了Angular4指令(Directive),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
1.Angular4指令分类
- 组件(
component directive
):UI
组件,继承于Directive
;
- 属性指令(
Attribute directive
):改变组件的样式;
- 结构指令(
Structural directive
):改变@L_360_1@
布局;
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>
以上是脚本宝典为你收集整理的Angular4指令(Directive)全部内容,希望文章能够帮你解决Angular4指令(Directive)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。