typescript - Como vincular variável estática de componente no HTML no Angular 2?

Quero usar uma variável estática de um componente em uma página HTML. Como vincular a variável estática do componente com um elemento HTML no Angular 2?

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 >

Resposta #1

O escopo das expressões vinculativas em um template de componentes é a instância da classe do componente.

Você não pode se referir a globais ou estáticos diretamente.

Como solução alternativa, você pode adicionar um getter à classe do seu componente

export class UrlComponent {

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

  get staticUrlArray() {
    return UrlComponent.urlArray;
  }

}

e use-o assim:

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

Resposta #2

Para evitar que o Angular chame get staticUrlArray a cada ciclo, você pode salvar uma referência de classe no escopo público do componente:

export class UrlComponent {

  static urlArray;

  public classReference = UrlComponent;

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

}

E então você pode usá-lo diretamente:

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