Comment lier une variable statique d'un composant en HTML dans angular 2 ?

Question

Je veux utiliser une variable statique d'un composant dans une page HTML. Comment lier une variable statique d'un composant avec un élément 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

La portée des expressions de liaison dans un modèle de composants est l'instance de la classe de composants.

Vous ne pouvez pas faire référence aux globales ou aux statiques directement.

Comme solution de rechange, vous pouvez ajouter un getter à la classe de vos composants.

export class UrlComponent {

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

  get staticUrlArray() {
    return UrlComponent.urlArray;
  }

}

et l'utiliser comme :

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

Answer 2

Pour éviter qu'Angular appelle get staticUrlArray à chaque cycle, vous pouvez enregistrer une référence de classe dans la portée publique du composant :

export class UrlComponent {

  static urlArray;

  public classReference = UrlComponent;

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

}

Et ensuite vous pouvez l'utiliser directement :

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

Answer 3

Vous pouvez aussi simplement déclarer un champ du type de la classe, comme tel :

export class UrlComponent {
  static urlArray;

  UrlComponent = UrlComponent;

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

Vous pouvez ensuite faire référence aux variables statiques en utilisant ce préfixe :

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

Cela fonctionne également / est nécessaire pour référencer des choses comme les Enums ou des objets comme la console directement dans votre modèle.

Answer 4

Il est intéressant de noter que l'utilisation d'un attribut de classe préfixé par "readonly" dans le modèle fonctionne. Par conséquent, si votre variable statique s'avère être en fait une constante, allez-y et utilisez la fonction

export class UrlComponent {
    readonly urlArray;
}

Answer 5

Solution sans codage dans le constructeur :

export class UrlComponent {

  readonly static urlArray = ' Inside Class';

  readonly UrlArray = UrlComponent.urlArray;

  constructor() {  }
}

vous pouvez utiliser ce champ statique dans d'autres composants ou classes :

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

en utilisant dans le modèle (notez le "U" majuscule dans UrlArray ) :

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