Angular2 从 HTML 模板访问全局变量

11 浏览
0 Comments

Angular2 从 HTML 模板访问全局变量

我有一个全局变量来存储国家列表，代码如下：

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

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

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

我可以在组件代码中自由地访问这个全局变量，但是在 HTML 模板中无法实现这样的操作：

我可以通过定义一个局部变量并在初始化时将全局变量赋值给它来将全局变量传递给组件。

ngOnInit() {

this.countryCodes = COUNTRY_CODES;

}

然后将 ngFor 修改为循环这个局部变量以使其正常工作。

我的问题是：这样做是正确的方式吗？每次我想在模板中使用全局变量时都定义一个桥接变量让我感到有些不舒服。

0

3 答案

0 Comments

问题的原因是代码中的全局变量名字拼写错误。解决方法是将全局变量名字修改为正确拼写的形式。

具体来说，代码中定义了一个全局变量COUNTRY_CODES，但是在HTML模板中访问这个变量时却将其写成了countryCodes。这导致在模板中无法正确访问到这个变量。

为了解决这个问题，需要将全局变量的名字修改为与模板中访问时一致的形式。将COUNTRY_CODES修改为countryCodes即可。

以下是修改后的代码示例：

export var countryCodes = ["AD", "AE", "AF"];

修改后的代码能够正确运行，并且在模板中能够正确访问到全局变量。

如果需要查看完整的代码示例，可以点击以下链接：

[working plunker](http://plnkr.co/edit/ZHqS8WbdYh3TUyxeqMCS?p=preview)

0
0 Comments

问题的出现的原因是COUNTRY_CODES变量的定义有问题，解决方法是修复变量的定义，并且在HTML模板中正确引用该变量。另外，还可以通过创建一个sharedService来定义全局变量，或者在bootstrap函数中使用provide函数来定义常量并注入到相应的组件中使用。

首先，需要注意到COUNTRY_CODES变量的定义存在问题，开头多加了两个双引号。应该修正为：

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

其次，一旦将常量值传递给this.countryCode，应该在ngFor循环中正确使用它，例如：

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

或者，如果直接在HTML中使用它，建议创建一个sharedService来定义全局变量。

更新：

另一种方法是使用provide函数在bootstrap函数中定义常量，并在相应的组件中注入它来使用。可以在这里查看这种方式的示例：

[Working Example](http://plnkr.co/edit/0W87b9PbTNnoAuPMtROJ?p=preview)

0
0 Comments

问题的出现原因是在组件中创建了一个变量countryCodes，但是视图中访问的是COUNTRY_CODES。

问题的解决方法是在组件中创建一个getter，通过该getter来访问需要的全局变量。代码如下：

import { COUNTRY_CODES } from "../constants";
(...)  
export class MyComponent {
  get countryCodes() { return COUNTRY_CODES; }
  // or countryCodes = COUNTRY_CODES;
}

然后在模板中使用这个getter来访问变量，代码如下：

另外，也可以使用共享服务的方式来实现相同的效果。使用哪种方式取决于具体的使用场景。与全局变量相比，服务更容易进行单元测试。

参考链接：

- [Select based on enum in Angular2](https://stackoverflow.com/questions/35750059)

- [How to bind a list in Angular2?](https://stackoverflow.com/questions/37234236)

这个问题在较新版本的Angular中可能会有所变化。在Angular 11应用程序中，这种方法可能不起作用，会报错。报错信息为"'const' enums can only be used in property or index access expressions or the right hand side of an import declaration or export assignment or type query.'"。这是由于TypeScript的限制，如果枚举被声明为const，就无法通过这种方式在代码中访问枚举值。

感谢ünterZöchbauer的提醒，我之前没有意识到这个问题。现在问题已经解决了。

0