尝试使用具有不同模板的相同组件答案

【问题标题】：Trying to use same component with different templates尝试使用具有不同模板的相同组件
【发布时间】：2020-04-13 03:18:42
【问题描述】：

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

在一种情况下，我想将component 用作button。
在另一种情况下，我想将component 用作list item。

一切都是一样的只是 template 更改，我想知道是否有任何方法可以通过扩展 component 或更清洁的东西而不使用内部 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>

【问题讨论】：

标签： angular ionic-framework components ionic4 angular8

【解决方案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> 中如何处理模板变量。

【讨论】：