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

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>

참조 URL : https://stackoverflow.com/questions/39193538/how-to-bind-static-variable-of-component-in-html-in-angular-2