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更改为在此局部变量上循环以使其工作。

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

Answer 1

您正在组件中创建一个变量countryCodes ，但该视图正在访问COUNTRY_CODES *

---

不能从模板中直接访问全局标识符，如Array 、 window 、 document 、 class 和 enum 名称以及全局变量。

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

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

Answer 2

第一个#

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

应该是，

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

第二个#

将 const 值传递给this.countryCode ，您应该在 ngfor 循环中使用它，例如，

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

或

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

更新

另一种方法是您可以使用provide function and define your constant there in provide function在bootstrap function内的provide function and define your constant there in provide function然后将其注入相应的组件以使用它。

看看这里，

工作示例

Answer 3

将此更改为

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

你的代码在你的数组中有额外的"所以你必须先删除它，然后你的代码才能顺利运行

工作笨蛋

Answer 4

我想做一个类似的事情，但有很多单一的常量。

为每一个定义一个 getter 真的很烦人——就像为这些常量创建服务的方法一样，因为这意味着我只能在我可以实际注入它的地方使用它们（或者再次进行额外的工作）。

我发现使用内联模板，为我修复了它 - 因为它允许将常量编译到模板中 - 使用打字稿多行 `${variable}` 模板语法 - 唯一需要注意的是值必须根据他们的类型。 因为 array.toString() 方法会导致 '1,2,3,4'，所以你需要将它包装在 "[]"/"'string'" 中，以便角度模板引擎将它作为数组/字符串拾取再次。

编辑：我刚刚看到提到了一个类似的方法，但我也不想将每个值都注入到构造函数中，因为这与为每个值定义一个成员一样不舒服。

常量.ts：

export const TEST_STRING = 'route';
export const TEST_ARRAY = [1, 2, 3, 4];

组件.ts：

 import {
  TEST_STRING,
  TEST_ARRAY
 } from 'constants.ts'
 @Component({
  selector: 'hn-header',
  template: '
      <a [routerLink]="['${TEST_STRING}']">Link</a>
      <div *ngFor="let test of [${TEST_ARRAY}];">{{test}}</div>
  '
  styleUrls: ['./header.component.css']
 })
 export class HeaderComponent {...}

结果：

<a href="route">Link</a>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

Answer 5

角 8/9

...应用程序/全局变量/globals.ts

export class GlobalVars {
    public static baseUrl:string = "http://localhost:8000/";
    //public static baseUrl:string = "https://myproduction.site.com/";
    public static countries = ["AD","AE","AF"];
}

...应用程序/组件/someconsumerpage.ts

import{ GlobalVars } from './../../global-variables/globals';
   
@Component({
  selector: 'some-consumer-page',
  templateUrl: './someconsumerpage.html',
  styleUrls: ['./someconsumerpage.scss']
})
export class HotelsBaseComponent implements OnInit {
  countries = GlobalVars.countries;
  constructor(
  ) { }

}

...应用程序/组件/someconsumerpage.html

<h3 *ngFor="let c of countries">{{c}}</h3>