Angular中根据角色ID切换调用不同ng-template模板的技术问询

有两种常用的实现方式，根据你的场景选择即可：

方式一：*ngIf + ngTemplateOutlet #

适合只有两种角色的简单场景，逻辑直接清晰：

<!-- 定义管理员模板 -->
<ng-template #admin>
  <div>管理员专属操作面板</div>
</ng-template>

<!-- 定义普通角色模板 -->
<ng-template #role>
  <div>普通角色操作界面</div>
</ng-template>

<!-- 根据角色ID判断渲染对应模板 -->
<ng-container *ngIf="rolet.role.id === adminRoleId; else normalRole">
  <ng-container *ngTemplateOutlet="admin"></ng-container>
</ng-container>
<ng-template #normalRole>
  <ng-container *ngTemplateOutlet="role"></ng-container>
</ng-template>

核心逻辑：用*ngIf判断当前角色是否为管理员，满足条件则渲染admin模板，否则通过else分支渲染role模板。

方式二：ngSwitch + ngTemplateOutlet #

如果以后可能扩展更多角色类型，这种方式扩展性更好：

<ng-template #admin>
  <div>管理员专属操作面板</div>
</ng-template>

<ng-template #role>
  <div>普通角色操作界面</div>
</ng-template>

<!-- 基于角色ID做匹配切换 -->
<ng-container [ngSwitch]="rolet.role.id">
  <ng-container *ngSwitchCase="adminRoleId" [ngTemplateOutlet]="admin"></ng-container>
  <ng-container *ngSwitchDefault [ngTemplateOutlet]="role"></ng-container>
</ng-container>

核心逻辑：通过ngSwitch匹配角色ID，命中adminRoleId时渲染管理员模板，其他情况默认渲染普通角色模板，新增角色时只需添加对应的*ngSwitchCase和模板即可。

内容的提问来源于stack exchange，提问作者Nadula