Angular2从访问HTML模板全局变量

我有一个全局变量来国这样的列表存储：Angular2从访问HTML模板全局变量

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

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

来源

2016-06-10 Harry Ninh

标识表明其与全局变量或常量服务并注入需要的地方。 –

你在你创建一个变量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>

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

也

来源

2016-06-10 07:19:35

第一＃

您应该注意，您的COUNTRY_CODES存在问题。你在开始时放了两个双引号。

它应该是，

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

二＃

一旦你通过常量的值this.countryCode，你应该像ngfor循环使用它，

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

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

UPDATE

另一种方法是你可以使用内bootstrap functionprovide function and define your constant there in provide function然后注射到相应的组件来使用它。

检查出在这里呀，

Working Example

来源

2016-06-10 07:08:16 micronyks

变化这是

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

你的代码有你的阵列中的额外"让你不得不删除这个第一不是你的代码运行as smothly

working plunker

来源

2016-06-10 07:09:21

downvote是恕我直言，不适合，但你的答案缺少模板访问'COUNTRY_CODES'的部分，但变量名为'countryCodes'。你在你的Plunker中纠正了它，但答案并不反映这一点。我想这是downvote的原因。 –

是啊同意，但我没有在回答中加入，因为Globalvaribale中只有错误，所以没有在模板中发布juts错误的部分@GünterZöchbauer –

我想待办事项类似的事情看，但有很多单一常数。

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

我发现使用内联模板为我修正了它 - 因为它允许将常量编译成模板 - 使用typescripts多行`$ {variable}`模板语法 - 只需要注意的是值必须根据其类型进行包装。由于array.toString（）方法会导致'1,2,3,4'，所以你需要将它包装在'[]“/”'string'“中，这样角模板引擎会将它作为一个数组/字符串再次。

编辑：我刚刚看到有提到类似的梅索德，但我也不想每一个价值注入constuctor，因为这将是作为限定每个值的成员不舒服。

常数。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>

来源

2018-02-27 22:17:16 Florian

Angular2从访问HTML模板全局变量

回答

相关问题