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

78

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 >

angular typescript angular2-services

— Santosh Hegde
quelle

115

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>

— Günter Zöchbauer
quelle

Wenn HTML dann eine for-Schleife hat? Ich habe eine Schleife, die auf die statische Variable der Komponente zugreift. Wenn ich "let person of person ()" verwende, funktioniert dies nicht. Hier geben Personenmethode mehrere Personen zurück. Erhalten "TypeError: self.context.persons ist keine Funktion" Fehler

— Raj m

@rajm Bitte erstellen Sie eine neue Frage mit minimalem Code, der die Reproduktion ermöglicht.

— Günter Zöchbauer

gerade gepostet .. stackoverflow.com/questions/40173118/…

— raj m

4

Nein, Sie brauchen definitiv keinen ()Getter und sollten ihn dort nicht haben. get staticUrlArray() {}ist nicht public staticUrlArray() {}Einer wird direkt wie zugegriffen staticUrlArray, der andere als Methode wie staticUrlArray().

— Timothy Zorn

1

Siehe den folgenden Link auch als Referenz: github.com/angular/angular/issues/6429

— Sudhakar

36

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>

— mithus7
quelle

2

Bei einer einfachen Variablen, die ich für den Status eines Kontrollkästchens verwendet habe, wurden mit dieser Methode Dutzende Aufrufe der Funktion get vermieden. Bei Verwendung innerhalb einer Schleife (z. B. Zeilen einer Tabelle) kann dies sehr schädlich sein. Ich würde sagen, dies ist die bessere Antwort und die Syntax ist etwas einfacher.

— Dean

Dies ist eine sehr interessante Lösung. Es scheint seltsam, einen Verweis auf eine Klasse innerhalb der Klasse selbst zu deklarieren. Aber es funktioniert in Angular.

— Sir Papilonius

1

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.

— mmey
quelle

scheint der Antwort von mithus7 sehr ähnlich zu sein

— Bogdan D

@BogdanD, in der Tat, mit dem kleinen Unterschied, dass ich "UrlComponent = UrlComponent" verwende, da ich dies ausdrucksvoller finde als die Verwendung einer generischen "classReference", die nicht zeigt, um welche Klasse es sich handelt. Außerdem habe ich im März geantwortet, während mithus7 im April geantwortet hat ... Als ich es betrachtete, bemerkte ich, dass ich einen Tippfehler in der Vorlage hatte, der behoben wurde, dass ...

— mmey

0

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;
}

— Felix A.
quelle

0

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>

— Michal.S
quelle