Angular中的指令是一個(gè)js類渔扎，它被聲明為@directive。Angular中有3種指令表現(xiàn)形式夭问。
組件的指令
它們構(gòu)成了主類泽西，包含了組件在運(yùn)行時(shí)應(yīng)該如何處理、實(shí)例化和使用的詳細(xì)信息缰趋。
結(jié)構(gòu)指示
結(jié)構(gòu)指令主要處理操作dom元素捧杉。結(jié)構(gòu)指令在指令前有符號(hào)。例如秘血，ngIf和*ngFor味抖。
屬性指示
屬性指令處理修改dom元素的外觀和行為。您可以創(chuàng)建自己的指令灰粮。
怎么自定義自己的指令仔涩？
采用angular-cli命令創(chuàng)建
ng g directive nameofthedirective
e.g
ng g directive directives/bgColor
運(yùn)行命令后生成如下文件：
CYGR-0101-01-0137deMacBook-Pro:jinadmin cygr-0101-01-0137$ ng g directive directives/bgColor
CREATE src/app/directives/bg-color.directive.spec.ts (229 bytes)
CREATE src/app/directives/bg-color.directive.ts (143 bytes)
UPDATE src/app/app.module.ts (2279 bytes)
app.module.ts文件導(dǎo)入及聲明剛創(chuàng)建的指令
bg-color. directive
import { Directive } from '@angular/core';
@Directive({
selector: '[appBgColor]'
})
export class BgColorDirective {
constructor() { }
}
怎樣使用指令？
我們要在要使用此類指令的頁(yè)面模板中添加下面的代碼示例
<div>
<span>hello world.</span>
</div>
<div>
<span appBgColor>hello world.</span>
</div>
指令處理
import { Directive , ElementRef} from '@angular/core';
@Directive({
selector: '[appBgColor]'
})
export class BgColorDirective {
constructor(Element: ElementRef) {
console.log(Element);
Element.nativeElement.style.backgroundColor = 'red';
Element.nativeElement.innerText="Color is changed by bgColor Directive. ";
}
}
然后粘舟，添加此指令的dom就變成指令處理后的結(jié)果
最后可以看下渲染后的結(jié)果
