Directive exportAs

參考文檔:https://angular.cn/api/core/Directive

什麼是exportAs?
exportAs,是定義在directive中的定義一個名字,用於在模板中把該指令賦值給一個變量。改變量可以調用directive裏面的方法

例如有以下指令

@Directive({
  selector: '[appFjAutocomplete]',
  exportAs:'app-fj'
})
export class FjAutocompleteDirective {
  el:ElementRef
  defaultText:String = 'default';
  constructor(el: ElementRef) {
     this.el = el; // 獲取當前的dom
  }
  autoData(){
    return 'getdatas'
  }
}

 使用:在input上新建一個變量applyNameAuto,並且將applyNameAuto賦值爲這個指令(即app-fj),
好處:我們可以通過ref調用directive函數或訪問directive props(即FjAutocompleteDirective裏面的方法 )。

<input type="text" [appFjAutocomplete]="'auto'" #applyNameAuto="app-fj">

// <app-autocomplete [Dom]="applyNameAuto"></app-autocomplete>

 打印applyNameAuto會看到FjAutocompleteDirective中的方法和屬性;

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章