in an angular component, how to programmatically append a template to various locations

Question

In my component A, i have a small reusable template #MyTpl that I would like to dynamically/programmatically add in various locations of the component A's template. ngIf could do the trick but I have a corner case with an 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>

Is there a way to append #MyTpl (conditionnaly) to the content of the currently cased mode ?

Answer 1

要么切换为使用独立组件，要么需要使用模板，可以使用

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

这会将MyTpl模板代替ng-container