Angular 2에서 HTML 구성 요소의 정적 변수를 바인딩하는 방법은 무엇입니까?

HTML 페이지에서 구성 요소의 정적 변수를 사용하고 싶습니다. Angular 2의 HTML 요소와 구성 요소의 정적 변수를 바인딩하는 방법은 무엇입니까?

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Rx';
@Component({
  moduleId: module.id,
  selector: 'url',
  templateUrl: 'url.component.html',
  styleUrls: ['url.component.css']
})
export class UrlComponent {

  static urlArray;
  constructor() {
  UrlComponent.urlArray=" Inside Contructor"
  }
}

<div>
  url works!
   {{urlArray}}
</div >

구성 요소 템플릿의 바인딩 식 범위는 구성 요소 클래스 인스턴스입니다.

전역 또는 정적을 직접 참조 할 수 없습니다.

해결 방법으로 구성 요소 클래스에 게터를 추가 할 수 있습니다.

export class UrlComponent {

  static urlArray;
  constructor() {
    UrlComponent.urlArray = "Inside Contructor";
  }

  get staticUrlArray() {
    return UrlComponent.urlArray;
  }

}

다음과 같이 사용하십시오.

<div>
  url works! {{staticUrlArray}}
</div>

Angular 호출을 방지하기 위해 각주기에서 get staticUrlArray를 사용하려면 컴포넌트의 공용 범위에 클래스 참조를 저장할 수 있습니다.

export class UrlComponent {

  static urlArray;

  public classReference = UrlComponent;

  constructor() {
    UrlComponent.urlArray = "Inside Contructor";
  }

}

그런 다음 직접 사용할 수 있습니다.

<div>
  url works! {{ classReference.urlArray }}
</div>

다음과 같이 클래스 유형의 필드를 선언 할 수도 있습니다.

export class UrlComponent {
  static urlArray;

  UrlComponent = UrlComponent;
  
  constructor() {
    UrlComponent.urlArray=" Inside Contructor"
  }
}

그런 다음이 접두사를 사용하여 정적 변수를 참조 할 수 있습니다.

<div>
  url works! {{UrlComponent.urlArray}}
</div>

이것은 또한 작동합니다 / 템플릿에서 직접 열거 형 또는 콘솔과 같은 개체를 참조하는 데 필요합니다.

흥미롭게도 템플릿에서 "readonly"접두사가 붙은 클래스 속성을 사용하면 작동합니다. 따라서 정적 변수가 실제로 상수로 판명되면 계속해서

export class UrlComponent {
    readonly urlArray;
}

생성자에서 코딩하지 않는 솔루션 :

export class UrlComponent {

  readonly static urlArray = ' Inside Class';

  readonly UrlArray = UrlComponent.urlArray;

  constructor() {  }
}

다른 구성 요소 또는 클래스에서 해당 정적 필드를 사용할 수 있습니다.

import {UrlComponent} from 'some-path';
export class UrlComponent2 {
  readonly UrlArray = UrlComponent.urlArray;
}

템플릿에서 사용 (에서 대문자 'U'참고 UrlArray) :

<div>
  url works!
  {{UrlArray}}
</div>