Angular2从HTML模板访问全局变量

发布时间：2020-12-17 08:03:30 所属栏目：安全来源：网络整理

导读：我有一个全局变量来存储这样的国家/地区列表： export var COUNTRY_CODES = ["AD","AE","AF" /* and more */]; 在我的一个组件中，我使用普通的import语句导入了变量 import { COUNTRY_CODES } from "../constants"; 我可以在组件代码中自由访问这个全局变量

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

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 *

无法直接从模板中访问全局标识符，如数组，窗口，文档，类和枚举名称以及全局变量。

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!