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元素上时，该指令调用show()的方法AppSlidingComponent。

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

querySelector找到DOM元素，但被视为HTMLElement，而不是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：是否可以通过指令与第二级子组件进行交互？

1 个答案: