调用其父组件内 <ng-content> 内的组件的方法

Question

首先是Plunkr

基本上，我有一个动态的选项卡控件。将有任意数量的选项卡，每个选项卡都将包含一个继承自此“延迟加载”组件的组件。我希望实现的功能是，当用户单击选项卡时，它将从选项卡中包含的任何组件中调用“loadData”。

我尝试使用 @ViewChild 或 @ContentChild 访问子组件，但我尝试的任何方法似乎都不起作用。

标签的模板是：

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

在选项卡组件中的“活动”属性的设置器上，我希望调用元素中包含的任何组件的 .loadData() 方法。这可以实现吗？

Answer 1

它对我有用

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

  @ContentChild(DelayLoadComponent) component: DelayLoadComponent;

但它不会延迟加载组件。

Plunker example

也许您想添加一个*ngIf，它只在选项卡处于活动状态时将组件添加到 DOM。