Question

我有一个HTML就是这样的组件：

<app-cancel-apply (onApply)="onApply()" (onCancel)="onCancel()">
  <!-- 100+ lines of HTML here -->
</app-cancel-apply>

但是有时我想要一个名为okOnly的布尔@Input标志：

<app-ok (onOk)="onCancel()">
  <!-- The exact same 100+ lines of HTML here -->
</app-ok>

如何有条件地更改外包装而不创建新组件并复制并粘贴100余行HTML？谢谢

我想我可以使用内容投影（可能是错误的），但是我已经在使用内容投影来投影100余行HTML。这样做两次似乎很疯狂。

Answer 1

您可以为内部内容定义一个通用模板：

<ng-template #innerContent>
  <!-- 100+ lines of HTML here -->
</ng-template>

并将其与模板插座一起插入相应的容器中，该容器可通过ngIf...else进行设置：

<app-ok *ngIf="okOnly; else cancelTemplate" (onOk)="onCancel()">
  <ng-container *ngTemplateOutlet="innerContent"></ng-container>
</app-ok>

<ng-template #cancelTemplate>
  <app-cancel-apply (onApply)="onApply()" (onCancel)="onCancel()">
    <ng-container *ngTemplateOutlet="innerContent"></ng-container>
  </app-cancel-apply>
</ng-template>

有角度地有条件地更改组件的包装

1 个答案: