是否可以直接在Angular 2 html模板中访问全局变量？

Question

所以我把app.settings放进去了

public static get DateFormat(): string { return 'MM/DD/YYYY';}

然后在我的一个组件的html模板中,我想做这样的事情.

<input [(ngModel)]="Holiday" [date-format]="AppSettings.DateFormat"/>

我有组件

import { AppSettings } from '../../../app.settings';

现在它在html模板中无法像这样访问.有什么办法吗？

Answer 1

不,模板中的代码范围是组件实例.您需要将值分配给组件中的字段,或者添加转发到全局变量的getter或方法,以便能够从模板中使用它.

import { AppSettings } from '../../../app.settings';

...
export class MyComponent {
  get dateFormat() {
    return AppSettings.DateFormat;
  }
}

然后就可以使用它了

<input [(ngModel)]="Holiday" [date-format]="dateFormat"/>

Answer 2

这看起来很hacky，但你可以使用管道。它使您免于为每个组件重复注入或变量绑定。

@Pipe({
    name: 'settings',
})
export class GlobalVariablePipe implements PipeTransform {

    transform(value: any): object {
        return AppSettings;
    }
}

然后，一旦导入到您的模块中，您就可以简单地使用管道，如下所示：

{{(''|settings).DateFormat}}