2017-01-03 9 views
1

は、だから私はは、Angular 2 htmlテンプレートで直接アクセスできるグローバル変数ですか?

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

ようapp.settingsに入れた後、私はこのような何かをしたいコンポーネントの私のHTMLテンプレートの1インチコンポーネントで

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

は、今はそれがHTMLテンプレートでは、このようなアクセス可能ではありません

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

を持っています。何か方法はありますか?

答えて

2

いいえ、テンプレート内のコードの有効範囲はコンポーネントインスタンスです。グローバル変数に転送するゲッターやメソッドを、テンプレートから使用できるようにするには、コンポーネント内のフィールドに値を割り当てるか、またはグローバル変数に転送するメソッドを追加する必要があります。

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

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

あなたはありません、私の知る限り

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

のようにそれを使用することができ、それはデザインであります。テンプレートはコンポーネントと結合されているため、スコープを導出してバインド可能なデータにアクセスする方法です。ハッキングされる可能性はありますが、それを把握しても、これはあなたが従わないべき道です。その後、

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}} 
私に適しています

私はクラスでこの種のものを行います。

+0

あなたがそれに慣れている場合は、そのAppConfigファイルでエクスポートされた定数を使用することもできます。 –

関連する問題