角4/5グローバル変数

Question

私はAngular 2アプリケーションでグローバル変数を作成するのに本当に苦労します。

私はすでにグーグルでこれについての過去3時間のStackOverflowの多くの記事を読んでいますが、私はそれを動作させることができないようです。私が本当に助けてくれることを願っています。私はこの質問に対して謝ります。

だから私は、私のファイルはこのようになりますこれは、globals.tsと呼ばれています：

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


@Injectable() 
export class Globals { 

    var role = 'test'; 

} 

そして、私はこのような私のコンポーネントの私のHTMLビューで変数役割を使用したい：

{{ role }} 

私はすでに次のように私のapp.module.tsにglobals.tsファイルを追加しました：

providers: [ 
    Globals 
], 

このファイルで何をしても、うまく動作しませんでした。私がしたくないのは、globals.tsファイルをすべてのコンポーネントで手動でインポートしなければならないということです。そのため、私はプロバイダ機能を使いたいのです。

私は本当にあなたが私を助け、もう一度ごめんなさいと願っています。あなたはAngular dependency injectionを経由して、あなたのアプリケーションの任意のポイントからGlobalsエンティティにアクセスすることができます

E

Answer 1

よろしく。あなたには、いくつかのコンポーネントのテンプレートで出力にGlobals.role値をしたい場合には、すべてのサービスのようなコンポーネントのコンストラクタを通じてGlobalsを注入する必要があります

// hello.component.ts 
import { Component } from '@angular/core'; 
import { Globals } from './globals'; 

@Component({ 
    selector: 'hello', 
    template: 'The global role is {{globals.role}}', 
    providers: [ Globals ] // this depends on situation, see below 
}) 

export class HelloComponent { 
    constructor(private globals: Globals) {} 
} 

を私はHelloComponentでGlobalsを提供するが、代わりにそれはいくつかのHelloComponent's親コンポーネントに提供することができますかAppModuleでもGlobalsには変更できない静的データ（定数のみ）があるまで問題はありません。しかし、それが真実でなく、例えば異なるコンポーネント/サービスがそのデータを変更できる場合、Globalsはsingletonでなければなりません。その場合、使用される階層の最上位レベルに提供する必要があります。のは、これがAppModuleあるとしましょう。また

import { Globals } from './globals' 

@NgModule({ 
    // ... imports, declarations etc 
    providers: [ 
    // ... other global providers 
    Globals // so do not provide it into another components/services if you want it to be a singleton 
    ] 
}) 

、それはそれはで最後の

更新

// globals.ts 
import { Injectable } from '@angular/core'; 

@Injectable() 
export class Globals { 
    role: string = 'test'; 
} 

する必要があり、VARあなたが行った方法を使用することは不可能だ、私が作成しました単純demo on Plunker、ここでは単一のGlobalsが3つのコンポーネント間で共有され、そのうちの1つはGlobals.roleの値を変更できます。