Wie binde ich eine statische Variable der Komponente in HTML in Winkel 2?

Ich möchte eine statische Variable einer Komponente in einer HTML-Seite verwenden. Wie binde ich eine statische Variable der Komponente mit einem HTML-Element in Winkel 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 >

Der Bereich der Bindungsausdrücke in einer Komponentenvorlage ist die Komponentenklasseninstanz.

Sie können nicht direkt auf Globals oder Statics verweisen.

Um dieses Problem zu umgehen, können Sie Ihrer Komponentenklasse einen Getter hinzufügen

export class UrlComponent {

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

  get staticUrlArray() {
    return UrlComponent.urlArray;
  }

}

und benutze es wie:

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

Um zu vermeiden, dass Angular bei jedem Zyklus staticUrlArray aufruft, können Sie eine Klassenreferenz im öffentlichen Bereich der Komponente speichern:

export class UrlComponent {

  static urlArray;

  public classReference = UrlComponent;

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

}

Und dann können Sie es direkt verwenden:

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

Sie können auch einfach ein Feld des Klassentyps als solches deklarieren:

export class UrlComponent {
  static urlArray;

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

Mit diesem Präfix können Sie dann auf statische Variablen verweisen:

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

Dies funktioniert auch / ist erforderlich, um Dinge wie Enums oder Objekte wie die Konsole direkt in Ihrer Vorlage zu referenzieren.

Interessanterweise funktioniert es, ein Klassenattribut zu verwenden, dem in der Vorlage das Präfix "readonly" vorangestellt ist. Wenn sich herausstellt, dass Ihre statische Variable tatsächlich eine Konstante ist, verwenden Sie sie

export class UrlComponent {
    readonly urlArray;
}

Lösung ohne Codierung im Konstruktor:

export class UrlComponent {

  readonly static urlArray = ' Inside Class';

  readonly UrlArray = UrlComponent.urlArray;

  constructor() {  }
}

Sie können dieses statische Feld in anderen Komponenten oder Klassen verwenden:

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

Verwenden in Vorlage (Großbuchstabe 'U' in UrlArray):

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