Angular无需HTML模板时获取指令EventEmitter输出值的方法

你的现有实现存在本质错误 #

你手动实例化MyOwnDirective、通过@HostBinding绑定属性的方式，并没有真正激活Angular指令：Angular的指令必须由框架本身实例化，才能接入依赖注入、变更检测、生命周期调度体系，你自己new的只是普通类实例，既不会触发指令的内置逻辑，和宿主元素的关联也是无效的。

正确实现方案 #

你只需要让Angular自动在组件宿主上挂载指令，并注入实例即可，步骤如下：

1. 先确保MyOwnDirective已经添加到对应模块的declarations数组中
2. 改造你的组件代码：

@Component({
  selector: 'my-own-component',
  template: `<!-- 你的组件原有模板内容 -->`,
  // 给组件宿主元素激活指令，同时绑定输入值
  host: {
    '[myOwnDirective]': 'directiveInput'
  }
})
export class MyOwnComponent implements OnInit, OnDestroy {
  // 指令的@Input输入值，等价于模板里的[myOwnDirective]绑定
  directiveInput = 'someValue';
  // 订阅销毁控制器，避免内存泄漏
  private destroy$ = new Subject<void>();

  // Angular会自动将宿主上挂载的指令实例注入到这里
  constructor(private myOwnDirective: MyOwnDirective) {}

  ngOnInit() {
    // 直接订阅指令的EventEmitter即可拿到输出值
    this.myOwnDirective.valueChange
      .pipe(takeUntil(this.destroy$))
      .subscribe(val => {
        // 这里处理指令返回的结果
        console.log('指令输出值：', val);
      });
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

如果你不想在host属性里写绑定，也可以换成@HostBinding实现输入绑定：

export class MyOwnComponent {
  @HostBinding('@Input.myOwnDirective') directiveInput = 'someValue';
  // 剩下逻辑和上面一致
}

补充说明 #

如果是在其他组件的模板里使用MyOwnComponent，你也可以直接在模板上绑定指令的输入输出，和普通指令用法完全一致：

<my-own-component [myOwnDirective]="inputVal" (valueChange)="handleChange($event)"></my-own-component>

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