如何在模板中使用带有枚举的ngswitch

Question

我正在尝试用枚举值更改模板
TS:

enum NumType {
first, second, third
}
@Component({
selector: 'app-test',
template: `
<div [ngSwitch]="numType">
<a *ngSwitchCase="numType.first" href="first">first</a>
<a *ngSwitchCase="numType.second" href="second">second</a>
<a *ngSwitchCase="numType.third" href="third">third</a>
</div>
`,
})
export class TestElementComponent {
@Input() readonly numType: NumType;
}

HTML:

<app-test
[numType]="numType.first"
></app-info-element>  

然后我得到了这个错误：

ERROR TypeError: Cannot read property 'first' of undefined

你能告诉我需要做些什么才能让它发挥作用吗
使用了Angular 8。

Answer 1

只能使用属于组件的变量。因此，如果使用枚举，则应该在组件中使用变量。这就是你通常使用带有定义的.ts的原因

//definitions.ts
export enum NumType { //<---see the word "export"
first, second, third
}

您的主要组件

import {NumType} from './definitions'
numType=NumType
//now you can use
<app-test [type]="numType.first"></app-test>  

你的应用程序测试灵魂也导入"；NumType"；

import {NumType} from './definitions'
numType=NumType
@Input() type:NumType  //<--the input has no possible called "numType"
//now you can use -see that the "switch" is about "type"
<div [ngSwitch]="type">
<a *ngSwitchCase="numType.first" href="first">first</a>
<a *ngSwitchCase="numType.second" href="second">second</a>
<a *ngSwitchCase="numType.third" href="third">third</a>
</div>

堆叠式

顺便说一句，你使用的是<a href>，如果你想使用角度，你应该使用

<a routerLink="....">

请参阅文档