Як прив'язати статичну змінну компонента в 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 >

Обсяг виразів прив'язки у шаблоні компонентів - це екземпляр класу компонентів.

Ви не можете безпосередньо посилатися на глобальні чи статичні дані.

Як обхідне рішення ви можете додати геттер до свого класу компонентів

export class UrlComponent {

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

  get staticUrlArray() {
    return UrlComponent.urlArray;
  }

}

і використовувати його як:

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

Щоб уникнути Angular-виклику get staticUrlArray під час кожного циклу, ви можете зберегти посилання на клас у загальнодоступній області дії компонента:

export class UrlComponent {

  static urlArray;

  public classReference = UrlComponent;

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

}

І тоді ви можете використовувати його безпосередньо:

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

Ви також можете просто оголосити поле типу класу як таке:

export class UrlComponent {
  static urlArray;

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

Потім ви можете посилатися на статичні змінні, використовуючи цей префікс:

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

Це також працює / необхідно для посилання на матеріали, такі як Enums, або такі об’єкти, як консоль, безпосередньо у вашому шаблоні.

Цікаво, що споживання атрибута класу з префіксом "readonly" у шаблоні ПРАЦЮЄ. Отже, якщо ваша статична змінна виявляється насправді константою, продовжуйте і використовуйте

export class UrlComponent {
    readonly urlArray;
}

Рішення без кодування в конструкторі:

export class UrlComponent {

  readonly static urlArray = ' Inside Class';

  readonly UrlArray = UrlComponent.urlArray;

  constructor() {  }
}

Ви можете використовувати це статичне поле в інших компонентах або класах:

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

використання в шаблоні (примітка з великою буквою 'U' UrlArray)

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