web-dev-qa-db-fra.com

Comment lier une variable statique de composant en HTML dans angular 2?

Je veux utiliser une variable statique d'un composant dans une page HTML. Comment lier une variable statique de composant à un élément HTML dans 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 >
angulartypescriptangular2-services
51
Santosh Hegde

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

Vous ne pouvez pas parler directement de globals ou de statics.

Pour contourner le problème, vous pouvez ajouter un getter à votre classe de 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>
85
Günter Zöchbauer

Pour éviter que Angular n'appelle get à 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 puis vous pouvez l'utiliser directement:

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