각 HTML 페이지(예: 각 ng-class)에서 Typescript 열거형을 사용하는 올바른 방법
각 및 활자 스크립트를 처음 접합니다.
나는 다음과 같은 타이프스크립트 열거를 가지고 있습니다.
public enum MyEnum{
A = 0,
B = 1,
C = 2
}
범위 변수는 다음과 같습니다.
$scope.myLetter: MyEnum = MyEnum.B;
열거형 검사를 하는 올바른 방법은 무엇입니까?
옵션 1: html 페이지의 열거형 정수 값 비교 -
<div ng-class="{classA: myLetter === 0, classB: myLetter === 1, classC: myLetter === 2}">Test panel</div>
옵션 2: 컨트롤러 범위 메서드에서 클래스 이름 가져오기
$scope.getClass(value: myLetter): string{
if(value === MyEnum.A)
return 'classA';
if(value === MyEnum.B)
return 'classB';
if(value === MyEnum.C)
return 'classC';
}
그리고 html 요소를 가지는건..
<div ng-class='getClass(myLetter)'>Test panel</div>
옵션 3: Angular.js 및 ng-switch-when-emulating enum에서 'RyanNerd'가 제공하는 답변
저의 경우 옵션 2가 바람직하며, 나머지 옵션은 ng-class 값을 문자열로 체크인하므로 정적 유형을 적용할 수 없습니다.의견을 공유하거나 더 나은 다른 옵션이 있다면 알려주시기 바랍니다.
컨트롤러 범위 메서드에서 클래스 이름 가져오기
저는 컨트롤러가 클래스 이름을 알도록 하는 아이디어를 좋아하지 않습니다.
스코프에 컨버터 기능을 추가할 수 있습니다.
$scope.myEnumName = (value: MyEnum) => MyEnum[value];템플릿에 사용합니다.
ng-class="{'A':'ClassA', 'B':'ClassB', 'C':'ClassC'}[myEnumName(myLetter)]"또는 스위치 기능 추가
$scope.switchMyEnum = <T>(value: MyEnum, cases: { [value: string]: T }) => cases[MyEnum[value]];템플릿:
ng-class="switchMyEnum(myLetter, {'A':'ClassA', 'B':'ClassB', 'C':'ClassC'})필요한 경우에만
myLetter스위치:$scope.switchMyLetter = <T>(cases: { [value: string]: T }) => cases[MyEnum[$scope.myLetter]];템플릿:
ng-class="switchMyLetter({'A':'ClassA', 'B':'ClassB', 'C':'ClassC'})여러 범위에서 여러 개의 열거형을 사용하려는 경우:
angular.module("MyApp", []) .run(["$rootScope", (root: {}) => { function registerSwitchers(...enumInfos: [string, { [value: number]: string }][]) { enumInfos.forEach(enumInfo => { var switcherName = enumInfo[0] var enumType = enumInfo[1] root[switcherName] = (value: any, cases: { [value: string]: any }) => cases[enumType[value]]; }); } registerSwitchers( ["switchMyEnum1", MyEnum1], ["switchMyEnum2", MyEnum2]); }])
또한 클래스 개체를 컨트롤러에 빌드하고 보기에서 식(괄호 표기법 사용)으로 설정할 수도 있습니다.
예:-
$scope.panelClass = {};
$scope.panelClass[MyEnum.A] = 'classA';
$scope.panelClass[MyEnum.B] = 'classB';
$scope.panelClass[MyEnum.C] = 'classC';
다음과 같이 다시 쓸 수 있도록 타이프스크립트 버전에서 지원(폴리필 지원 포함)하는 경우 위 내용을 속기 구문(ES6)으로 쓸 수 있습니다.
$scope.panelClass = {
[MyEnum.A]:'classA',
[MyEnum.B]:'classB',
[MyEnum.C]:'classC'
};
다음과 같이 사용합니다.
<div ng-class="panelClass[myLetter]">Test panel</div>
이는 ng-class 축약식과 유사합니다.
<div ng-class="{0:'classA', 1:'classB', 2:'classC'}[myLetter]">Test panel</div>
우리는 보통 필요합니다.Enums번호 값을 명시적으로 참조해야 할 때.위 사용 사례에서 사용하는 명시적인 사용 사례가 보이지 않습니다.enums. 어레이는 다음과 같이 잘 작동합니다.
((): void => {
var ClassConstant: string[] = ['classA', 'classB', 'classC'];
angular
.module('app', [])
.constant('ClassConstant', ClassConstant)
.controller('AppController', ($scope, ClassConstant) => {
$scope.setClass = (classname: string) => {
return ClassConstant[classname];
};
});
})();<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app="app">
<div ng-controller="AppController">
<div ng-class="{{setClass(myLetter)}}">1</div>
</div>
</body>
</html>저도 이 질문에 직면했습니다.
이것이 제 해결책입니다.
나는 내 열거값의 각 값에 대해 부울을 반환하는 함수를 컨트롤러에 만듭니다.
내 컨트롤러에서.ts
export class AController {
public TestEnumA(): boolean {
return this.scope.field == MyEnum.A;
}
public TestEnumB(): boolean {
return this.scope.field == MyEnum.B;
}
}
내가 보기에 .html
<div ngController="AController as controllerAlias">
<div class="a-class" ng-class="{'classA-true': controllerAlias.TestEnumA(), 'classB-true': controllerAlias.TestEnumB()}"><div>
</div>
이 솔루션을 선택한 이유는 무엇입니까?
이런 식으로, 저는 컨트롤러의 css 클래스를 하드 코딩하지 않습니다. (당신의 컨트롤러의 css 클래스를 하드 코딩하는 것은 뷰의 유지성을 보장하는 좋은 생각이 아닙니다.)
이렇게 하면 ng-class의 enum 값을 하드코딩하지 않습니다.
이렇게 하면 자동 코드 완성과 컴파일 시 검증의 이점을 얻을 수 있습니다.
rootScope에서 열거형을 설정할 수 있습니다.
angular
.module('moduleName', [])
.run(['$rootScope', function ($rootScope) {
$rootScope.Enum = PathToEnum.Enum;
}]);
- pro: 쉽게 설정할 수 있고 어디서나 사용할 수 있습니다(컨트롤러가 다르거나 보기에 따라 다름).
- 단점: 컴파일 시 자동 완성 및 검증을 잃게 됩니다.
보기에서
<div ngController="AController">
<div class="class" ng-class="{$root.Enum.A: 'classA', $root.Enum.B: 'classB'}[valueInScope]">
</div>
</div>
언급URL : https://stackoverflow.com/questions/31703204/correct-way-to-utilize-typescript-enum-in-angular-html-pages-e-g-angular-ng-cl
'source' 카테고리의 다른 글
| ubuntu에 ansible과 함께 MySQL 설치 (0) | 2023.11.07 |
|---|---|
| Oracle sqdeveloper - 명령줄에서 DB를 연결하는 방법 (0) | 2023.11.07 |
| Angularjs로 해시 후 URL 매개 변수를 구문 분석하려면 어떻게 해야 합니까? (0) | 2023.11.07 |
| Python에서 문자열이 비어 있지 않은 경우 여러 개의 문자열에 가입 (0) | 2023.11.07 |
| 플라스크/Ajax HTTP 연결을 유지하는 방법? (0) | 2023.11.07 |