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');
  }
}

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

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

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

有一种方法可以通过指令与子组件进行交互吗？

Answer 1

在指令中使用ContentChild获取投影组件实例。

@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() { }

}

Example

Angular: 有一种方法可以通过指令与二级子组件进行交互吗？

Angular: there is a way to interact with second-level child component from a directive?

javascript

children

angular