web-dev-qa-db-ja.com

angular 2のHTMLのコンポーネントの静的変数をバインドする方法は？

HTMLページでコンポーネントの静的変数を使用したい。コンポーネントの静的変数をangular 2のHTML要素にバインドする方法は？

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

コンポーネントテンプレート内のバインディング式のスコープは、コンポーネントクラスインスタンスです。

グローバルまたは静的変数を直接参照することはできません。

回避策として、コンポーネントクラスにゲッターを追加できます。

export class UrlComponent {

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

  get staticUrlArray() {
    return UrlComponent.urlArray;
  }

}

次のように使用します：

<div>
  url works! {{staticUrlArray}}
</div>
85
Günter Zöchbauer

Angularが各サイクルでget staticUrlArrayを呼び出すのを避けるために、コンポーネントのパブリックスコープにクラス参照を保存できます。

export class UrlComponent {

  static urlArray;

  public classReference = UrlComponent;

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

}

そして、あなたはそれを直接使うことができます：

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