angular - 尝试使用具有不同模板的相同组件

Question

我正在尝试使用 component在应用程序的 2 个不同位置，但我想更改 template并保留 功能 .

在一种情况下，我想使用 component作为 button .

在另一种情况下，我想使用 component作为 list item .

一切都一样只是 template更改，我想知道是否有任何方法可以在不使用 if 的情况下仅通过扩展 component 来做到这一点。或者更干净的东西。

一些代码:

<ng-container [ngSwitch]="status">

  <button *ngSwitchCase="'none'" (click)="action()">
    <ion-icon name="md-white-users"></ion-icon>
    Ask to connect
  </button>
  <button *ngSwitchCase="'requestSent'" class="connected">
    <ion-icon name="md-white-users"></ion-icon>
    Request Sent
  </button>
  <button *ngSwitchCase="'connected'" class="connected">
    <ion-icon name="md-white-users"></ion-icon>
    Connected
  </button>
</ng-container>

Answer 1

你可以试试 <ng-content> (Content Projection)

您的组件模板:

<ng-content> </ng-content>

实例化前一个组件的其他组件:

<app-my-dynamic-component>
  <!-- Button's template -->
</app-my-dynamic-component>

<app-my-dynamic-component>
  <!-- List's template -->
</app-my-dynamic-component>

这是假设您的组件不严重依赖模板，因为我真的不知道模板变量在 <ng-content> 中是如何处理的。 .