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

Question

首先，Plunkr

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

我尝试使用@ViewChild或@ContentChild访问子组件，但我尝试的任何东西似乎都无法工作。

标签的模板是：

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

在tab组件中属性'active'的setter上，我希望调用元素中保存的任何组件的.loadData（）方法。这可以实现吗？

Answer 1

它对我有用

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

  @ContentChild(DelayLoadComponent) component: DelayLoadComponent;

但它不会延迟加载组件。

Plunker example

也许你想添加一个*ngIf，只有当标签处于活动状态时才会将组件添加到DOM中。