如何在模板中使用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>

看看官方文档和现场演示.

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 {}