Angular中无需@ViewChild，如何暴露指令的trigger函数？

要实现不通过@ViewChild就能在模板中调用指令的trigger函数，甚至直接暴露函数而非指令实例，可以通过以下步骤操作：

步骤1：配置指令的exportAs #

首先在指令元数据中设置exportAs，让模板能通过引用变量获取指令实例：

@Directive({
  selector: '[foo]',
  // 指定模板中引用指令时的标识名称
  exportAs: 'fooDirective'
})
export class FooDirective {
  trigger() {
    // 你的trigger函数逻辑
    console.log('指令trigger函数已执行');
  }
}

步骤2：基础实现（调用实例方法） #

如果只是需要调用函数，最简单的方式是直接通过指令实例访问方法：

<div foo #directive="fooDirective"></div>
<button (click)="directive.trigger()">Click on trigger</button>

这种写法完全不需要@ViewChild，直接在模板中通过引用变量调用指令方法。

步骤3：进阶实现（直接暴露函数） #

如果希望模板中的#trigger变量直接指向函数而非指令实例，可以通过模板变量赋值实现：

<div foo #directive="fooDirective"></div>
<!-- 用*ngIf确保指令实例初始化完成，再将绑定上下文的trigger函数赋值给trigger变量 -->
<ng-container *ngIf="directive; let dir">
  <button (click)="trigger()" [style.visibility]="trigger = dir.trigger.bind(dir)">Click on trigger</button>
</ng-container>

这里利用*ngIf的let语法获取初始化后的指令实例，通过属性绑定将绑定了当前上下文的trigger函数赋值给trigger变量，后续点击按钮即可直接调用trigger()。

内容的提问来源于stack exchange，提问作者amirc