如何在组件内部使用Directive Composition API绑定的指令输出？

要在组件内部使用通过Directive Composition API挂载的指令输出，同时按需控制是否将其暴露为组件对外输出，可以采用以下两种方案：

方案1：注入指令实例并订阅输出 #

移除hostDirectives中的outputs配置（若无需对外暴露），通过@Host装饰器注入指令实例，手动订阅其输出事件：

@Component({
  standalone: true,
  selector: 'admin-menu',
  template: 'admin-menu.html',
  hostDirectives: [{
    directive: MenuBehavior,
    inputs: ['menuId']
    // 移除outputs配置，阻止该输出对外暴露
  }],
})
export class AdminMenu {
  constructor(@Host() private menuBehavior: MenuBehavior) {}

  ngOnInit() {
    // 订阅指令的menuClosed输出
    this.menuBehavior.menuClosed.subscribe(() => {
      this.someMethod();
    });
  }

  someMethod() {
    // 在这里处理menuClosed事件逻辑
  }
}

如果需要同时保留对外暴露该输出，只需在hostDirectives中保留outputs配置即可，内部订阅逻辑不受影响。

方案2：通过宿主事件绑定监听输出 #

利用组件的host配置，直接监听指令触发的输出事件，绑定到组件内部方法：

@Component({
  standalone: true,
  selector: 'admin-menu',
  template: 'admin-menu.html',
  hostDirectives: [{
    directive: MenuBehavior,
    inputs: ['menuId']
    // 按需决定是否保留outputs配置
  }],
  host: {
    '(menuClosed)': 'handleMenuClosed($event)'
  }
})
export class AdminMenu {
  handleMenuClosed(event: any) {
    // 处理事件并调用内部方法
    this.someMethod();
  }

  someMethod() {
    // 业务逻辑实现
  }
}

这两种方案都能让你在组件内部直接使用指令的输出，无需强制将其暴露为组件对外的输出（除非你主动配置）。

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