Angular: есть ли способ взаимодействия с дочерним компонентом второго уровня из директивы? - PullRequest
Новая
       4

Angular: есть ли способ взаимодействия с дочерним компонентом второго уровня из директивы?

0 голосов
/ 22 января 2020

В 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.

Существует способ взаимодействия с дочерним компонентом из директивы?

1 Ответ

0 голосов
/ 22 января 2020

Использование 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() { }

}

Пример

...