Angular2从HTML模板访问全局变量
Angular2从HTML模板访问全局变量
提问于 2016-06-10 14:08:53
我有一个全局变量来存储国家列表，如下所示：
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更改为在此局部变量上循环，以使其正常工作。
我的问题是:这是正确的做法吗？每当我想在我的模板中使用全局变量时，我都不太习惯定义桥接变量。
回答 1
Stack Overflow用户
发布于 2018-02-28 06:17:16
我想做一个类似的事情，但是有很多单一的常量。
为每个常量定义一个getter真的很烦人-为这些常量创建服务的方法也是如此，因为这意味着我只能在我可以实际注入它的地方使用它们(或者再做一次额外的工作)。
我发现使用内联模板为我修复了它-因为它允许将常量编译到模板中-使用类型脚本多行${variable}模板语法-唯一要注意的是值必须根据它们的类型进行包装。因为array.toString()方法会导致'1,2,3,4‘，所以你需要把它包装在"[]"/"'string'“中，所以角度模板引擎再次把它作为一个数组/字符串来提取。
编辑:我刚刚看到上面提到了一个类似的方法，但我也不想把每个值都注入到构造器中，因为这和为每个值定义一个成员一样不舒服。
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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37741010
复制相关文章
相似问题