我有一个全局变量来存储国家列表,如下所示:
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
更改为在此局部变量上循环,以使其正常工作。
我的问题是:这是正确的做法吗?每当我想在我的模板中使用全局变量时,我都不太习惯定义桥接变量。
发布于 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>
https://stackoverflow.com/questions/37741010
复制相似问题