1. 程式人生 > >Angular 指令(Directive)屬性型指令

Angular 指令(Directive)屬性型指令

Angular 指令(Directive)屬性型指令

在Angular中有三種指令型別

  • 元件 :擁有模板的指令
  • 結構型指令:通過新增或移除DOM來改變DOM佈局的指令
  • 屬性型指令:改變元素,元件或其他指令的外觀和行為的指令

自定義指令

這裡寫圖片描述

之後將其到app.moduel中新增即可使用

這裡寫圖片描述

@HostListener 監聽宿主元素的事件或者是其他元素的事件

示例:
這裡寫圖片描述

@Inout 資料從外向內傳遞,還可以為Input命別名

示例:
這裡寫圖片描述
這裡寫圖片描述

內建屬性型指令

  • ngClass :可以同時新增或移除多個類
  • ngStyle :向DOM新增樣式
  • ngModel:資料雙向繫結

ngClass

示例:
這裡寫圖片描述
這裡寫圖片描述
這裡寫圖片描述


ngStyle

示例:
這裡寫圖片描述
這裡寫圖片描述


ngModel

示例:
這裡寫圖片描述
這裡寫圖片描述