Angular2如何从HTML模板访问全局变量?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (88)

我有一个全局变量来存储像这样的国家列表:

export var COUNTRY_CODES = [""AD", "AE", "AF" /* and more */];

在我的一个组件中,我使用普通的import语句导入了变量

import { COUNTRY_CODES } from "../constants";

我能够在我的组件代码中自由地访问这个全局变量,但是在HTML模板上没有实现这样的效果:

<option *ngFor="let countryCode of COUNTRY_CODES" [value]="countryCode">{{countryCode | countryName}}</option>

我可以通过定义一个局部变量并在初始化期间为其分配全局变量,从而将全局变量传递给组件。

ngOnInit() {
  this.countryCodes = COUNTRY_CODES;
}

并改变ngFor循环这个局部变量,使其工作。

这是正确的方法吗?每次我想在我的模板中使用全局变量时,我都不太习惯定义桥接变量。

提问于
用户回答回答于

正在countryCodes组件中创建一个变量,但视图正在访问,COUNTRY_CODES而不是*

全球标识符一样Arraywindowdocument,类和枚举名和全局变量不能直接在模板中访问。

模板的范围是组件类实例。

如果需要访问这些内容,可以执行的操作是在组件中创建一个getter

import { COUNTRY_CODES } from "../constants";

@Component(...)  
export class MyComponent {
  get countryCodes() { return COUNTRY_CODES; }
  // or countryCodes = COUNTRY_CODES;
}

那么它可以在模板中使用

<option *ngFor="let countryCode of countryCodes" [value]="countryCode">{{countryCode | countryName}}</option>
用户回答回答于

第一#

你应该注意到你的COUNTRY_CODES存在问题。你在开始时放了两个双引号。

它应该是

Export var COUNTRY_CODES=["AD","AE","AF"];

第二#

一旦传递const值this.countryCode,你应该在ngfor循环中使用它,

*ngFor = "let cc in countryCode" [value]="cc"

要么

如果直接想在HTML中使用它,Id建议做一个sharedService定义全局变量。

另一种方法是你可以使用provide function and define your constant there in provide functionbootstrap function,然后将其注入相应的组件来使用它。

扫码关注云+社区

领取腾讯云代金券