角度8/9

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，类和枚举名称以及全局变量等全局标识符。

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

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

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

另见

Answer 2

首先＃

你应该注意你的COUNTRY_CODES有问题。你在开头就加了两个双引号。

应该是，

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

第二个＃

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

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

OR

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

<强>更新

其他方式是您可以在provide function and define your constant there in provide function中使用bootstrap function，然后将其注入相应的组件中以使用它。

在这里查看一下，

Working Example

Answer 3

将其更改为

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

您的代码在您的数组中有额外的"，因此您必须首先将其删除，而不是以代码的方式运行

working plunker

Answer 4

我想要一个类似的东西，但有很多单一的常量。

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

我发现使用内联模板，为我修复它 - 因为它允许将常量编译到模板中 - 使用typescripts multiline` $ {variable}`模板语法 - 唯一要注意的是值必须是根据他们的类型包裹。因为array.toString（）方法将导致＆＃39; 1,2,3,4＆＃39;所以你需要将它包装在＆＃34; []＆＃34; /＆＃34;＆＃39; string＆＃39;＆＃34;因此，角度模板引擎再次将其作为数组/字符串进行拾取。

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

constants.ts：

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

component.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

... app / global-varibles / 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"];
}

... app / components / 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(
  ) { }

}

... app / components / someconsumerpage.html

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

Angular2从HTML模板访问全局变量

5 个答案:

角度8/9