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