如何在模板中使用 ngSwitch？

Question

我有带有 IF 语句的模板：

<li *ngIf="activity.entity_name == 'Project'" [activity-project-item]="activity"></li>
<li *ngIf="activity.entity_name == 'Tooling'" [activity-tooling-item]="activity"></li>
<li *ngIf="activity.entity_name != 'Project' && activity.entity_name != 'Tooling'" [activity-item]="activity"></li>

如何用 ngSwitch 指令编写这个模板？

例如这个模板有解析错误“嵌入模板上的组件”：

<li [ngSwitch]="activity.entity_name">
    <template [ngSwitchCase]="'Project'" [activity-project-item]="activity"></template>
</li>

而且这个模板有解析错误“NgSwitch 没有提供者”：

<template [ngSwitch]="activity.entity_name">
    <li [ngSwitchCase]="'Project'" [activity-project-item]="activity"></li>
</template>

Answer 1

一种可能性：

<li [ngSwitch]="activity.entity_name">
  <template [ngSwitchCase]="'Project'">Selected Project</template>
  <template [ngSwitchCase]="'Tooling'">Selected Tooling</template>
  <template ngSwitchDefault>Or else...</template>
</li>

替代语法：

<div [ngSwitch]="activity.entity_name">
  <li *ngSwitchCase="'Project'">Selected Project</li>
  <li *ngSwitchCase="'Tooling'">Selected Tooling</li>
  <li *ngSwitchDefault>Or else...</li>
</div>

看看official docs和live demo。

Answer 2

模板

<li [ngSwitch]="activity.entity_name">
  <template [ngSwitchCase]="'Project'">Content here</template>
  <template [ngSwitchCase]="'Project2'">Other content here</template>
  <template ngSwitchDefault>Content if nothing matched</template>
</li>

还要确保拥有此组件的模块导入CommonModule。否则，ngSwitch 将无法识别。

@NgModule({
    ...
    imports: [CommonModule...],
    declarations: [ThisComponent...],
    ...
})
export default class MyModule {}