Angular2从HTML模板访问全局变量

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

export var COUNTRY_code=[“AD”、“AE”、“AF”/*及更多*/]；

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

从“./constants”导入{COUNTRY_code}”；

我可以在我的组件代码中自由访问此全局变量，但在HTML模板上未能实现类似的功能：

{{countryCode | countryName}

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

ngOnInit（）{
this.countryCodes=国家/地区代码；
}

并将

ngFor

更改为在此局部变量上循环以使其工作

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

首先#

您应该注意，您的国家/地区代码中存在问题。你在开头加了两个双引号

应该是,

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

第二#

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

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

或

如果您直接想在HTML中使用它，我建议使用

sharedService

来定义全局变量

更新

另一种方法是，您可以使用

提供函数，并在
引导函数中的提供函数
中定义常量，然后将其注入相应的组件以使用它

从这边看

将此更改为

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

您的代码在数组中有额外的
“
，因此您必须先删除它，然后才能正常运行代码

您正在组件中创建变量
countryCodes
，但视图正在访问
COUNTRY\u code
*


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

模板的作用域是组件类实例

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

{{countryCode | countryName}

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

另见




我想做一件类似的事情，但有很多单一常数

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

我发现使用内联模板，为我修复了它-因为它允许将常量编译到模板中-使用typescripts多行`${variable}`模板语法-唯一需要注意的是，值必须根据其类型进行包装methode将产生“1,2,3,4”，因此您需要将其包装在“[]”/“'string'”中，因此角度模板引擎再次将其作为数组/字符串提取

Edit：我刚才看到有一个类似的方法提到过，但我也不想将每个值都注入构造函数，因为这和定义每个值的成员一样让人不舒服

常数.ts：

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

组件1.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 {...}

导入{
测试字符串，
测试单元阵列
}来自“constants.ts”
@组成部分({
选择器：“hn标头”，
模板：'
1.
2.
3.
4.
角度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"];
}

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.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"];
}

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>

{{c}
Id建议使用带有全局变量或常量的服务，并在需要时将其注入。否决票并不合适，但您的答案缺少模板访问的部分
COUNTRY\u code
，但变量名为
countrycode
。您在Plunk中对其进行了更正，但答案没有反映在。我想这就是否决票的原因。是的，我同意，但我没有在回答中添加这一点，因为globalvarible中有错误，但模板中没有，所以发布juts juts missible part@GünterZöchbauer与getter合作，但不仅仅是一个普通属性。谢谢