change - page title angular 4

¿Cómo vincular la variable estática del componente en HTML en el angular 2?

Question

Quiero usar una variable estática de un componente en la página HTML. ¿Cómo vincular la variable estática del componente con un elemento HTML en 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 >

Answer 1

El alcance de las expresiones vinculantes en una plantilla de componentes es la instancia de la clase de componentes.

No puede referirse a globales o estáticas directamente.

Como solución, puede agregar un getter a su clase de componentes

export class UrlComponent {

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

  get staticUrlArray() {
    return UrlComponent.urlArray;
  }

}

y úsalo como:

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

Answer 2

Para evitar llamadas angulares, obtenga staticUrlArray en cada ciclo, puede guardar una referencia de clase en el alcance público del componente:

export class UrlComponent {

  static urlArray;

  public classReference = UrlComponent;

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

}

Y luego puedes usarlo directamente:

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