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中的方法和属性;

发布了112 篇原创文章 · 获赞 149 · 访问量 55万+

猜你喜欢

转载自blog.csdn.net/l284969634/article/details/103065948