Angular 템플릿에서 TypeScript Enums 사용하기
페이지 정보
작성자 GrapeCity 작성일 2020-08-05 00:00 조회 4,863회 댓글 0건본문
관련링크
Enum 은 TypeScript에서 제공하는 편리한 기능입니다. Enum을 사용하면, 많은 경우에 일반적으로 사용되는 숫자 상수 대신, 의미있는 이름을 사용하여 미리 정의된 값 집합에서 필요한 속성 값을 지정할 수 있습니다. 예를 들어, 다음 코드를 사용하여 FlexChart.chartType 속성 값을 지정할 수 있습니다.
chart.chartType = ChartType.Column;
Angular의 Enums(열거형)
그러나 Enum 유형 속성의 문제는 Angular 템플릿에서 발생합니다. Angular 템플릿에서는 해당 값을 지정하고 싶지만 지정할 수 없습니다. 유일한 방법은 열거형 멤버에 해당하는 숫자 상수를 사용하는 것입니다. 그러나, 이 방법은 불명확한 마크업을 생성하고 해당 값을 알아내는 것이 어려울 수 있습니다.
<wj-flex-chart [chartType]="2" …>
문제의 원인은 Angular 템플릿 표현식의 컴포넌트 속성을 제외하고는 어떤 것도 참조할 수 없다는 것입니다. 그러나 속성은 여전히 사용할 수 있으므로 이것을 활용해볼 수 있습니다! 여기 ChartType 속성과 같이 필요한 Enum 유형에 대한 참조를 저장하는 속성을 추가할 수 있습니다.
import * as wjcChart from 'wijmo/wijmo.chart';
…
export class AppCmp {
ChartType = wjcChart.ChartType;
이제 템플릿 바인딩에서 열거형 멤버를 참조 할 수 있습니다.
<wj-flex-chart [chartType]="ChartType.Column" …>
Wijmo 열거형 타입 속성
이 문제는 열거형 멤버의 문자열 이름을 속성에 할당할 수있는 Wijmo 구성 요소의 경우, 그다지 심각하지 않습니다 . 모든 Wijmo 열거형 유형 속성이 이러한 문자열을 실제 열거형 값으로 변환 할 수 있기 때문에, 해당 방법을 사용할 수 있습니다. 예를 들면 :
<wj-flex-chart [chartType]=" 'Column' " …>
그러나이 방법은 양방향 바인딩 시나리오의 경우 문제를 일으킬 수 있습니다. 예를 들어 가능한 차트 유형의 메뉴를 차트의 chartType 속성에 바인딩하려는 경우. "표현식이 확인된 후 변경되었습니다(Expression has changed after it was checked)"라는 예외 중 하나가 표시되거나, 선택한 메뉴 항목이 메뉴 헤더에 표시되지 않을 수 있습니다. 실제 열거형 값을 사용하는 코드에는 다음과 같은 잠재적인 문제가 없습니다.
Component:
chartType = wjcChart.ChartType.Column;
Template:
<wj-flex-chart [itemsSource]="data"
[chartType]="chartType"
[bindingX]="'country'"
style="height: 200px">
<wj-flex-chart-series [name]="'Downloads'" [binding]="'downloads'"></wj-flex-chart-series>
</wj-flex-chart>
<wj-menu [(value)]="chartType" [header]="'Chart Type'">
<wj-menu-item [value]="ChartType.Column">Column</wj-menu-item>
<wj-menu-item [value]="ChartType.Scatter">Scatter</wj-menu-item>
<wj-menu-item [value]="ChartType.Line">Line</wj-menu-item>
</wj-menu>
여기에서 메뉴 항목 값은 실제 열거형 값으로 정의되고 메뉴 값 속성은 구성 요소의 chartType 속성을 통해 차트의 chartType 속성에 양방향 바인딩됩니다 .
Angular 템플릿의 열거형 속성
전체 작업 예제는 "여기"에서 확인 할 수 있습니다.
댓글목록
등록된 댓글이 없습니다.