Angular (四) | 創造屬性指令-15

两块五的菜鸟發表於2024-05-29
1.簡單屬性指令的建立

@Directive 裝飾器類似於@Component 先建立選擇器 select

創造函式里的實參為DOM元素值

directive 和 component 在ngMoudule 裡宣告在一起

2.獲取元素屬性值

@Attribute 在constructor獲取屬性值的引數

3.輸入屬性

可以透過指令的選擇器直接獲取引數值,但在指令類裡使用@Input來獲取屬性

4.響應輸入屬性變化

在指令類裡使用ngOnchange了獲取屬性的變化,透過變化來改變宿主元素的外觀

5.輸出屬性

可以透過@Output 來發出屬性傳給宿主元件類的方法

6.可以使用angular自帶的裝飾器

@HostBinding 來繫結屬性

@HostListener 來繫結方法

7.可以定義雙向資料繫結

選擇器和事件繫結的名字相同就可以使用“香蕉盒”來實現雙向資料繫結

8.指令的模板變數

可以使用exportsAs 來匯出指令類,可以在引用處使用#prModel來匯出模板變數

相關文章