在angular组件中，如何以编程方式将模板追加到各个位置

Question

在我的组件A中，我有一个小的可重用模板#MyTpl，我希望以动态/编程的方式将其添加到组件A的模板的各个位置。ngIf可以做到这一点，但我有一个带有ngSwitch的边框：

<div class="compA" [ngSwitch]="mode">
  <div *ngSwitchCase="mode-1">
    <span>rofl</span>

  </div>
  <div *ngSwitchCase="mode-2">
    <span>kikoo</span>
  </div>
  ...
  <div *ngSwitchCase="mode-n">
    <span>kikoo</span>
  </div>
</div>

<ng-template #MyTpl>
  <button (click)="onClickLol()">lol</button>
</ng-template>

有没有办法将#MyTpl (conditionnaly)附加到当前cased mode的内容中？

Answer 1

切换到使用独立组件，或者如果需要使用模板，可以使用

<ng-container *ngTemplateOutlet="MyTpl"></ng-container>

这将用ng-container替换MyTpl模板