Как привязать статическую переменную компонента в HTML в angular 2?

Я хочу использовать статическую переменную компонента на HTML-странице. Как связать статическую переменную компонента с HTML-элементом в 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 >
32
angular angular2-services typescript

2 ответов

область выражений привязки в шаблоне components-это экземпляр класса components.

вы не можете напрямую ссылаться на глобалы или статику.

в качестве обходного пути вы можете добавить геттер для компонентов класса

export class UrlComponent {

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

  get staticUrlArray() {
    return UrlComponent.urlArray;
  }

}

и использовать его как: 

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

чтобы избежать углового вызова get staticUrlArray в каждом цикле, вы можете сохранить ссылку на класс в общедоступной области компонента:

export class UrlComponent {

  static urlArray;

  public classReference = UrlComponent;

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

}

и затем вы можете использовать его напрямую:

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