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