Angular 带有抽象方法的包装器组件

Question

搜索了一段时间后，我没有找到任何可以使用的东西。

我需要创建一个包装组件，它有一些按钮可以调用内部组件中的方法，如下所示：

包装组件：

<div class="card">
  <header class="card-header">
    <button (click)="onRefreshClick()">Load</button>
  </header>

  <div class="card-block">
    <ng-content></ng-content>
  </div>

</div>

现在我创建另一个使用此包装器的组件（例如 ChartA）：

<app-wrapper-card>
  <div style='display: block;'>
        <canvas baseChart class='chart' ....
        </canvas>
  </div>
</app-wrapper-card>

在包装器组件的onRefreshClick中，我需要从 ChartA 组件调用some method 。

我怎样才能做到这一点？

Answer 1

这样做：

<app-wrapper-card (messageEvent)="refreshButtonClicked($event)">
  <div style='display: block;'>
    <canvas baseChart class='chart' ....
    </canvas>
  </div>
</app-wrapper-card>

并在您的包装脚本中添加一个 EventEmitter

Answer 2

子组件：

您的子组件必须实现一些抽象的 class。 然后定义组件级提供程序，例如：

providers: [ {provide: BaseAbstractClass, useExisting: ChartA }]

父组件：

使用@ContentChild查询子组件：

@ContentChild(BaseAbstractClass) public baseClass: BaseAbstractClass;

现在您可以调用在子组件中实现的方法。

工作示例： https://stackblitz.com/edit/angular-2ruhvm