关于typescript:如何在角度2中绑定HTML中组件的静态变量?

How to bind static variable of component in HTML in angular 2?

我想在HTML页面中使用组件的静态变量。如何将组件的静态变量与Angular2中的HTML元素绑定?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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"
  }
}
1
2
3
  url works!
   {{urlArray}}
</div >


组件模板中绑定表达式的作用域是组件类实例。

不能直接引用全局或静态。

作为解决方法,您可以向组件类添加getter

1
2
3
4
5
6
7
8
9
10
11
12
export class UrlComponent {

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

  get staticUrlArray() {
    return UrlComponent.urlArray;
  }

}

使用方法如下:

1
  url works! {{staticUrlArray}}


为了避免在每个循环中调用get staticurlarray,可以在组件的公共范围中保存类引用:

1
2
3
4
5
6
7
8
9
10
11
export class UrlComponent {

  static urlArray;

  public classReference = UrlComponent;

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

}

然后您可以直接使用它:

1
  url works! {{ classReference.urlArray }}