试图将相同的组件用于不同的模板

Question

我试图在应用程序的2个不同位置使用组件，但我想更改模板并保留功能。

---

• 在某些情况下，我想将该组件用作按钮。
• 在其他情况下，我想将该组件用作列表项。

---

所有内容都是相同的，只是模板发生了变化，我想知道是否有任何方法可以通过扩展组件或更干净的方法而无需在if内部使用它。

某些代码：

<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>内部处理模板变量。