Angular2从HTML模板访问全局变量

Question

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

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此局部变量的to循环以使其工作.

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

Answer 1

您正在countryCodes组件中创建变量,但视图正在访问COUNTRY_CODES*

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

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

如果您需要访问其中任何一个,您可以做的是在组件中创建一个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>

使用像其他答案中建议的共享服务类似.更好的方法取决于具体的用例.与全局变量相反,服务很容易模拟单元测试.

也可以看看

• 选择基于Angular2中的枚举
• 如何绑定Angular2中的列表？