javascript - Angular：有一种方法可以与指令中的二级子组件交互吗？

Question

在 HTML 模板中，我有以下实现：

<tr sliding>
  <td>Field 1</td>
  <td>Field 2</td>
  <td>
    <app-sliding>Field 3</app-sliding>
  </td>
</tr>

我有以下指令：

@Directive({
  selector: '[sliding]'
})
export class SlidingDirective {

  @HostListener('mouseenter', ['$event'])
  public onHover(e: Event): void {
    const el = e.target as HTMLElement;
    const appSliding = el.querySelector('app-sliding') as AppSlidingComponent;

    if (cdSliding) {
      appSliding.show();
    }
  }
}

以及以下组件：

@Component({
  selector: 'app-sliding',
  template: `
    <ng-content></ng-content>
  `
})
export class AppSlidingComponent {
  show() {
    console.log('yes');
  }
}

我希望当鼠标悬停在DOM 元素上时，<tr>指令调用show().AppSlidingComponent

我尝试使用 @ViewChild 实现，但我看不到第二级孩子。

querySelector找到 DOM 元素，但被视为 HTMLElement，而不是 AppSlidingComponent。

有一种方法可以与指令中的子组件交互吗？

标签： javascriptangularchildren

Answer 1

使用ContentChild inside 指令来获取投影的组件实例。

@ContentChild
(SlidingComponent, {static:false}) compInst:SlidingComponent;

@HostListener('mouseenter', ['$event'])
  public onHover(e: Event): void {
    const el = e.target as HTMLElement;
    const appSliding = el.querySelector('app-sliding');
    this.compInst.show();
  }

  constructor() { }

}

例子