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"; }

運行時輸出：

如果cxFocus input被中括號包裹，則等號右邊必須為Component的一個實例屬性，否則編譯會報錯：

如果cxFocus不加中括號，則等號右邊的字符串被當成靜態字符串處理，而不是表達式。

如果需要directive根據host元素里某個屬性的變化而做相應的值，一個例子：

cxFocus加上中括號之后：

去掉中括號之后：變成純字符串了：

更多Jerry的原創文章，盡在：“汪子熙”:

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。