Angular2 从 HTML 模板访问全局变量

Question

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

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

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

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

我可以在我的组件代码中自由访问这个全局变量，但无法在 HTML 模板上实现类似的东西:

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

我可以通过定义局部变量并在初始化期间将全局变量分配给它来将全局变量传递给组件。

ngOnInit() {
  this.countryCodes = COUNTRY_CODES;
}

并更改 ngFor 以循环此局部变量以使其工作。

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

Answer 1

您正在组件中创建一个变量 countryCodes 但 View 正在访问 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>

使用其他答案中建议的共享服务的工作方式类似。什么是更好的方法取决于具体的用例。与全局变量相反，服务很容易模拟单元测试。

另见

• Select based on enum in Angular2
• How to bind a list in Angular2?