Angular2 ngSwitch 문에서 typescript 열거 형 값을 사용하는 방법
Typescript 열거 형은 Angular2의 ngSwitch 지시어와 자연스럽게 일치합니다. 그러나 구성 요소 템플릿에서 열거 형을 사용하려고하면 "정의되지 않은 속성 'xxx'을 읽을 수 없습니다 ..."가 나타납니다. 구성 요소 템플릿에서 열거 형 값을 사용하려면 어떻게해야합니까?
이것은 열거 형 (ngFor)의 모든 값을 기반으로 html 선택 옵션을 만드는 방법과 다릅니다. 이 질문은 열거 형의 특정 값을 기반으로 한 ngSwitch에 관한 것입니다. 열거 형에 대한 클래스 내부 참조를 만드는 동일한 접근 방식이 나타납니다.
구성 요소 클래스에서 열거 형에 대한 참조를 만들고 (방금 초기 문자를 소문자로 변경) 템플릿 ( plunker ) 에서 해당 참조를 사용할 수 있습니다 .
import {Component} from 'angular2/core';
enum CellType {Text, Placeholder}
class Cell {
constructor(public text: string, public type: CellType) {}
}
@Component({
selector: 'my-app',
template: `
<div [ngSwitch]="cell.type">
<div *ngSwitchCase="cellType.Text">
{{cell.text}}
</div>
<div *ngSwitchCase="cellType.Placeholder">
Placeholder
</div>
</div>
<button (click)="setType(cellType.Text)">Text</button>
<button (click)="setType(cellType.Placeholder)">Placeholder</button>
`,
})
export default class AppComponent {
// Store a reference to the enum
cellType = CellType;
public cell: Cell;
constructor() {
this.cell = new Cell("Hello", CellType.Text)
}
setType(type: CellType) {
this.cell.type = type;
}
}
열거 형을 인식하도록 구성 요소에 추가 할 사용자 지정 데코레이터를 만들 수 있습니다.
myenum.enum.ts :
export enum MyEnum {
FirstValue,
SecondValue
}
myenumaware.decorator.ts
import { MyEnum } from './myenum.enum';
export function MyEnumAware(constructor: Function) {
constructor.prototype.MyEnum = MyEnum;
}
enum-aware.component.ts
import { Component } from '@angular2/core';
import { MyEnum } from './myenum.enum';
import { MyEnumAware } from './myenumaware.decorator';
@Component({
selector: 'enum-aware',
template: `
<div [ngSwitch]="myEnumValue">
<div *ngSwitchCase="MyEnum.FirstValue">
First Value
</div>
<div *ngSwitchCase="MyEnum.SecondValue">
Second Value
</div>
</div>
<button (click)="toggleValue()">Toggle Value</button>
`,
})
@MyEnumAware // <---------------!!!
export default class EnumAwareComponent {
myEnumValue: MyEnum = MyEnum.FirstValue;
toggleValue() {
this.myEnumValue = this.myEnumValue === MyEnum.FirstValue
? MyEnum.SecondValue : MyEnum.FirstValue;
}
}
Angular4-HTML 템플릿에서 Enum 사용 ngSwitch / ngSwitchCase
여기에 해결책 : https://stackoverflow.com/a/42464835/802196
크레딧 : @snorkpete
귀하의 구성 요소에는
enum MyEnum{
First,
Second
}
그런 다음 구성 요소에서 멤버 'MyEnum'을 통해 Enum 유형을 가져오고 열거 형 변수 'myEnumVar'에 대한 다른 멤버를 만듭니다.
export class MyComponent{
MyEnum = MyEnum;
myEnumVar:MyEnum = MyEnum.Second
...
}
이제 .html 템플릿에서 myEnumVar 및 MyEnum을 사용할 수 있습니다. 예를 들어, ngSwitch에서 열거 형 사용 :
<div [ngSwitch]="myEnumVar">
<div *ngSwitchCase="MyEnum.First"><app-first-component></app-first-component></div>
<div *ngSwitchCase="MyEnum.Second"><app-second-component></app-second-component></div>
<div *ngSwitchDefault>MyEnumVar {{myEnumVar}} is not handled.</div>
</div>
이것은 간단하고 매력처럼 작동합니다 :) 그냥 열거 형을 선언하면 HTML 템플릿에서 사용할 수 있습니다
statusEnum: typeof SatusEnum = SatusEnum;
rc.6 현재 / 최종
...
export enum AdnetNetworkPropSelector {
CONTENT,
PACKAGE,
RESOURCE
}
<div style="height: 100%">
<div [ngSwitch]="propSelector">
<div *ngSwitchCase="adnetNetworkPropSelector.CONTENT">
<AdnetNetworkPackageContentProps [setAdnetContentModels]="adnetNetworkPackageContent.selectedAdnetContentModel">
</AdnetNetworkPackageContentProps>
</div>
<div *ngSwitchCase="adnetNetworkPropSelector.PACKAGE">
</div>
</div>
</div>
export class AdnetNetwork {
private adnetNetworkPropSelector = AdnetNetworkPropSelector;
private propSelector = AdnetNetworkPropSelector.CONTENT;
}
As an alternative to @Eric Lease's decorator, which unfortunately doesn't work using --aot (and thus --prod) builds, I resorted to using a service which exposes all my application's enums. Just need to publicly inject that into each component which requires it, under an easy name, after which you can access the enums in your views. E.g.:
Service
import { Injectable } from '@angular/core';
import { MyEnumType } from './app.enums';
@Injectable()
export class EnumsService {
MyEnumType = MyEnumType;
// ...
}
Don't forget to include it in your module's provider list.
Component class
export class MyComponent {
constructor(public enums: EnumsService) {}
@Input() public someProperty: MyEnumType;
// ...
}
Component html
<div *ngIf="someProperty === enums.MyEnumType.SomeValue">Match!</div>
Start by considering 'Do I really want to do this?'
I have no problem referring to enums directly in HTML, but in some cases there are cleaner alternatives that don't lose type-safe-ness. For instance if you choose the approach shown in my other answer, you may have declared TT in your component something like this:
public TT =
{
// Enum defines (Horizontal | Vertical)
FeatureBoxResponsiveLayout: FeatureBoxResponsiveLayout
}
To show a different layout in your HTML, you'd have an *ngIf for each layout type, and you could refer directly to the enum in your component's HTML:
*ngIf="(featureBoxResponsiveService.layout | async) == TT.FeatureBoxResponsiveLayout.Horizontal"
This example uses a service to get the current layout, runs it through the async pipe and then compares it to our enum value. It's pretty verbose, convoluted and not much fun to look at. It also exposes the name of the enum, which itself may be overly verbose.
Alternative, that retains type safety from the HTML
Alternatively you can do the following, and declare a more readable function in your component's .ts file :
*ngIf="isResponsiveLayout('Horizontal')"
Much cleaner! But what if someone types in 'Horziontal' by mistake? The whole reason you wanted to use an enum in the HTML was to be typesafe right?
We can still achieve that with keyof and some typescript magic. This is the definition of the function:
isResponsiveLayout(value: keyof typeof FeatureBoxResponsiveLayout)
{
return FeatureBoxResponsiveLayout[value] == this.featureBoxResponsiveService.layout.value;
}
Note the usage of FeatureBoxResponsiveLayout[string] which converts the string value passed in to the numeric value of the enum.
This will give an error message with an AOT compilation if you use an invalid value.
Argument of type '"H4orizontal"' is not assignable to parameter of type '"Vertical" | "Horizontal"
Currently VSCode isn't smart enough to underline H4orizontal in the HTML editor, but you'll get the warning at compile time (with --prod build or --aot switch). This also may be improved upon in a future update.
If using the 'typetable reference' approach (from @Carl G) and you're using multiple type tables you might want to consider this way :
export default class AppComponent {
// Store a reference to the enums (must be public for --AOT to work)
public TT = {
CellType: CellType,
CatType: CatType,
DogType: DogType
};
...
dog = DogType.GoldenRetriever;
Then access in your html file with
{{ TT.DogType[dog] }} => "GoldenRetriever"
I favor this approach as it makes it clear you're referring to a typetable, and also avoids unnecessary pollution of your component file.
You can also put a global TT somewhere and add enums to it as needed (if you want this you may as well make a service as shown by @VincentSels answer). If you have many many typetables this may become cumbersome.
Also you always rename them in your declaration to get a shorter name.
My component used an object myClassObject of type MyClass, which itself was using MyEnum. This lead to the same issue described above. Solved it by doing:
export enum MyEnum {
Option1,
Option2,
Option3
}
export class MyClass {
myEnum: typeof MyEnum;
myEnumField: MyEnum;
someOtherField: string;
}
and then using this in the template as
<div [ngSwitch]="myClassObject.myEnumField">
<div *ngSwitchCase="myClassObject.myEnum.Option1">
Do something for Option1
</div>
<div *ngSwitchCase="myClassObject.myEnum.Option2">
Do something for Option2
</div>
<div *ngSwitchCase="myClassObject.myEnum.Option3">
Do something for Opiton3
</div>
</div>
'development' 카테고리의 다른 글
| JSON 문자열을 JSON 객체로 변환 C # (0) | 2020.07.01 |
|---|---|
| Angular 2에서 싱글 톤 서비스를 어떻게 만듭니 까? (0) | 2020.07.01 |
| ASP.NET Core MVC에서 태그 도우미 선택 (0) | 2020.07.01 |
| Django 양식의 CSS 스타일링 (0) | 2020.07.01 |
| 문자열 변수를 사용하여 즉석에서 RegExps 만들기 (0) | 2020.07.01 |