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

Question

我正在尝试在应用程序的 2 个不同位置使用 component，但我想更改 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>。

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

Trying to use same component with different templates

components

ionic-framework

angular

ionic4

angular8