Как я могу изменить компонент контейнера на основе условия, избегая повторения его содержимого

Question

У меня есть компонент А, который является контейнером. Как я могу выбрать ComponentA или ComponentB на основе условия без необходимости перезаписывать содержимое.

<ComponentA *ngIf=true>
    ...Content
</ComponentA>

<ComponentB *ngIf=false>
    ...Content
</ComponentB>

Здесь я пишу ... Содержимое дважды. Как мне избежать повторения ... Содержание.

Answer 1

Вы можете воспользоваться ng-template и ngTemplateOutlet.

Попробуйте:

<ComponentA *ngIf=true>
    <ng-container *ngTemplateOutlet="repeatedContent"></ng-container>
</ComponentA>
<ComponentB *ngIf=false>
    <ng-container *ngTemplateOutlet="repeatedContent"></ng-container>
</ComponentB>
<ng-template #repeatedContent>
  ...Content
</ng-template>

Хороший ресурс: https://alligator.io/angular/reusable-components-ngtemplateoutlet/