Angular Directive 分為兩大類：structural 指令和 attribute 指令。

前者用于控制或者改變 DOM，后者控制已有 elements 的外觀或者行為。

源代碼：

import {AfterViewInit,Component,Directive,Input,OnInit } from "@angular/core";@Directive({selector: "[cxFocus]" }) export class FocusDirective implements OnInit, AfterViewInit {@Input("cxFocus") public config: string;@Input() set cxRefreshFocusOn(_switchCondition: string) {console.log("Jerry new value: " + _switchCondition);}constructor() {console.log("Jerry directive constructor");}ngAfterViewInit(): void {console.log("Jerry directive in ngOnInit: " + this.config);}ngOnInit(): void {console.log("Jerry directive in ngOnInit: " + this.config);} }@Component({selector: "app-root",template: `<div [cxFocus]="jerry">Hello</div><div cxFocus="Jerry config">World</div>`,styleUrls: ["./app.component.css"] }) export class AppComponent {jerry = "Jerry Hello"; }

運(yùn)行時(shí)輸出：

如果cxFocus input被中括號(hào)包裹，則等號(hào)右邊必須為Component的一個(gè)實(shí)例屬性，否則編譯會(huì)報(bào)錯(cuò)：

如果cxFocus不加中括號(hào)，則等號(hào)右邊的字符串被當(dāng)成靜態(tài)字符串處理，而不是表達(dá)式。

如果需要directive根據(jù)host元素里某個(gè)屬性的變化而做相應(yīng)的值，一個(gè)例子：

cxFocus加上中括號(hào)之后：

去掉中括號(hào)之后：變成純字符串了：

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的关于Angular directive使用的语法问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。