Angular 2 구성 요소 및 서비스에서 상수에 액세스하는 방법은 무엇입니까?

Angular 2 구성 요소 및 서비스에서 상수에 액세스하는 방법은 무엇입니까?

상수 파일 상수.ts:

export const C0NST = "constant";

서비스로 접속합니다.다음과 같은 service.ts:

import { C0NST } from './constants';

console.log(C0NST); // "constant"

그러나 구성요소 템플릿에서 액세스하는 경우:

some.component.ts:

import { C0NST } from './constants';

some.component.html:

{{ C0NST }} <!-- Outputs nothing -->

구성요소 클래스에서 구성원을 정의하는 방법은 다음과 같습니다.

some.component.ts

public const constant = C0NST;

어떤.성분

{{ constant }} <!-- constant -->

컴포넌트 클래스에서 가져온 상수를 가져왔음에도 불구하고 서비스 클래스에서는 직접 접근할 수 있었지만 컴포넌트 템플릿에서는 접근할 수 없었던 이유를 이해할 수 없습니다.

Angular2에서 템플릿은 구성 요소 클래스의 필드와 메서드에만 액세스할 수 있습니다.다른 건 다 금지되어 있습니다.여기에는 구성 요소 클래스에 보이는 것들이 포함됩니다.

이것을 우회하는 방법은 단지 상수를 참조하는 필드를 컴포넌트 내부에 두고 대신 그것을 사용하는 것입니다.

---

설계의 한 가지 한계이지만, 애초에 템플릿에 상수가 필요한 이유를 좀 더 생각해보셔야 할 것 같습니다.일반적으로 이러한 것들은 구성요소 자체나 서비스에서 사용되지만 템플릿은 사용되지 않습니다.

Component의 템플릿에서는 Component 클래스의 속성만 사용할 수 있으므로 외부 상수(또는 외부 변수)를 직접 사용할 수 없습니다.

지금까지 제가 발견한 가장 우아한 방법은 다음과 같습니다.

import { MY_CONSTANT } from '../constants';

@Component({
  // ...
})
export class MyTestComponent implements OnInit {

  readonly MY_CONSTANT = MY_CONSTANT;

  // ...
}

기본적으로 새로운 속성을 만들어 내는 겁니다MY_CONSTANT구성 요소 클래스 내부에 있습니다.읽기 전용을 사용하면 새 특성을 수정할 수 없습니다.

이렇게 하면 템플릿에서 다음을 사용할 수 있습니다.

{{ MY_CONSTANT }}

Angular2 템플릿 바인딩의 범위는 구성 요소 인스턴스입니다.접근 가능한 것만 바인딩에 사용할 수 있습니다.

이렇게 사용할 수 있습니다.

class MyComponent {
  myConst = CONST;
}

{{myConst}}

제 생각에는 두 가지 최선의 방향이 있습니다.

상수를 내부 구성 요소 속성으로 래핑

열거하다

export enum stateEnum {
  'DOING' = 0,
  'DONE',
  'FAILED'
}

component.ts

import { stateEnum  } from './enum'
export class EnumUserClass {
  readonly stateEnum : typeof stateEnum = stateEnum ;    
}

예제에서는 enum을 사용하지만 이는 정의된 상수의 모든 유형일 수 있습니다.typeof연산자는 TypeScript 타이핑 기능의 모든 이점을 제공합니다.그러면 템플릿에서 이 변수를 직접 사용할 수 있습니다.

성분.

<p>{{stateEnum.DOING}}<p>

이 솔루션은 사용하려는 각 구성 요소에서 기본적으로 데이터(또는 상수 참조)를 복제하기 때문에 메모리 사용 상황에서 효율성이 떨어집니다.그 외에 구문은
readonly constData: typeof constData = constData
내 생각에 많은 구문 잡음을 소개하고 새로운 사람들에게 혼란을 줄 수 있습니다.

부품기능상 외부상수 랩핑

두 번째 옵션은 외부 변수/상수를 성분 함수로 래핑하고 템플릿에 해당 함수를 사용하는 것입니다.

열거하다

export enum stateEnum {
  'DOING' = 0,
  'DONE',
  'FAILED'
}

component.ts

import { stateEnum  } from './enum'
export class EnumUserClass {
  getEnumString(idx) {
    return stateEnum[stateEnum[idx]];
  }   
}

성분.

<p>{{getEnumString(1)}}</p>  

좋은 점은 컨트롤러에 데이터가 중복되지 않고 다른 큰 단점이 발생한다는 것입니다.Angular team에 따르면 변경 탐지 메커니즘으로 인해 템플릿에 함수를 사용하는 것이 권장되지 않으며, 이는 함수가 값을 템플릿으로 반환할 경우 훨씬 효율적으로 작동하지 않습니다. 변경 탐지는 함수가 값을 반환한다는 것을 전혀 모르기 때문에 필요 이상으로 자주 호출됩니다(그리고 반환한다고 가정할 경우).const템플릿 보기를 채울 때 실제로 필요한 것은 한 번뿐입니다.이는 애플리케이션에 약간의 효율성 저하일 수도 있고(운이 좋으면) 기능이 다음과 같이 해결되면 완전히 고장날 수도 있습니다.Observable예를 들어, 당신은async결과를 구독할 파이프입니다.그것에 대한 나의 짧은 기사를 여기서 참조할 수 있습니다.

BaseComponent를 생성할 수 있으며, 이 위치에서 상수 인스턴스를 생성한 다음 FooComponent 확장 BaseComponent를 생성하고 상수를 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/40237561/how-to-access-a-constant-in-an-angular-2-component-and-service