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

据我所知，不，那就是设计。模板与组件结合在一起，这就是它们如何派生范围从而访问可绑定数据。它有可能被黑客入侵，但即使你弄明白，这也是你不应该遵循的道路。

我用类来做这件事：

class AppConfig {}

AppConfig.Globals = {
    TEST_VAL: 'hey now here is the value'
};
export { AppConfig }

然后像这样使用它：

import { Component } from '@angular/core';
import { AppConfig } from '../../app/app.config';

class HomeComponent {
    constructor() {
        this.test_val = AppConfig.Globals.TEST_VAL;
    }
}

HomeComponent.annotations = [
    new Component ( {
       templateUrl: './views/home/home.component.html'
    } )
];

export { HomeComponent }

在模板中：

{{test_val}}

适合我。

Answer 3

这似乎是一个古老的话题。然而，这是我的 2 美分。我改用了一项服务，它正在工作。我想出了这样的东西：<input [(ngModel)]="Holiday" [date-format]="appSettingService.DateFormat"/>。这个解决方案的不便之处，你有 DI 服务。

这是我所做的：

appSettingService.ts

import { Injectable } from '@angular/core';

@Injectable({

})
    export class AppSettingService{   
      constructor() { }  
      public DateFormat(): string { return 'MM/DD/YYYY';}
...

在您的组件中：

...
 constructor(public appSettingService : AppSettingService ) { }  
...

最后在您的模板中：

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

我正在寻找一种方法来使用不带后缀的值：

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

Answer 4

看起来有点hacky但你可以使用管道。这样可以避免在每个组件中重复注入或变量绑定。

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

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

然后，一旦在您的模块中导入，您只需按如下方式使用管道：

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

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

4 个答案: