Вызовите метод компонента, который находится внутри <ng-content> в его родительском компоненте

Question

Прежде всего, это Plunkr

По сути, у меня есть вкладка, которая является динамической. Будет любое количество вкладок, каждая из которых будет содержать компонент, который наследуется от этого компонента "Задержка загрузки". Функциональность, которую я хочу достичь, заключается в том, что когда пользователь нажимает на вкладку, он будет вызывать "loadData" изнутри того компонента, который находится на вкладке.

Я пытался получить доступ к дочернему компоненту с помощью @ViewChild или @ContentChild, но все, что я пытаюсь сделать, похоже, не работает.

Шаблон вкладки:

<div [hidden]="!active" class="pane">
  <ng-content></ng-content>
</div>

И в установщике свойства 'active' в компоненте tab я хочу вызвать метод.loadData() любого компонента, который содержится в элементе. Это достижимо?

Answer 1

У меня работает с

  ngAfterContentInit() {
    if(this.component) {
      this.component.loadData();
    }
  }

  @ContentChild(DelayLoadComponent) component: DelayLoadComponent;

но это не ленивая загрузка компонента.

Пример плунжера

Возможно, вы хотите добавить *ngIf это только добавляет компонент в DOM, когда вкладка активна.