如何在angular 2中绑定HTML中组件的静态变量？
如何在angular 2中绑定HTML中组件的静态变量？
提问于 2016-08-29 00:42:12
我想在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 >回答 6
Stack Overflow用户
回答已采纳
发布于 2016-08-29 00:45:57
components模板中绑定表达式的范围是components类实例。
您不能直接引用全局变量或静态变量。
作为一种解决办法，您可以向components类添加getter
export class UrlComponent {
static urlArray;
constructor() {
UrlComponent.urlArray = "Inside Contructor";
}
get staticUrlArray() {
return UrlComponent.urlArray;
}
}并像这样使用它：
<div>
url works! {{staticUrlArray}}
</div>Stack Overflow用户
发布于 2018-04-27 18:05:29
为了避免在每个周期调用get staticUrlArray，可以在组件的公共作用域中保存一个类引用：
export class UrlComponent {
static urlArray;
public classReference = UrlComponent;
constructor() {
UrlComponent.urlArray = "Inside Contructor";
}
}然后你可以直接使用它：
<div>
url works! {{ classReference.urlArray }}
</div>Stack Overflow用户
发布于 2020-03-09 22:18:42
您也可以只声明一个类类型的字段，如下所示：
export class UrlComponent {
static urlArray;
UrlComponent = UrlComponent;
constructor() {
UrlComponent.urlArray=" Inside Contructor"
}
}然后，可以使用以下前缀引用静态变量：
<div>
url works! {{UrlComponent.urlArray}}
</div>在模板中直接引用枚举之类的东西或console之类的对象时，这也是必要的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39193538
复制相关文章
相似问题