[解決済み] Angular 4/5/6 グローバル変数

質問

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

というファイルを持っています。 globals.ts というファイルがあり、それは次のようになります。

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


@Injectable()
export class Globals {

  var role = 'test';

}

そして、このようにコンポーネントのHTMLビューで変数roleを使いたいのです。

{{ role }} 

私はすでにglobals.tsファイルを私の app.module.ts を以下のような形で追加しています。

providers: [
  Globals
],

このファイルで何をやっても、うまくいきませんでした。私がやりたくないのは、すべてのコンポーネントで globals.ts ファイルを手動でインポートしなければならないことです。

どのように解決するのですか？

以下のように Globals エンティティにアクセスできます。 Angular依存性注入 . を出力したい場合 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(public globals: Globals) {}
}

私が提供した Globals の中に HelloComponent で提供されるかもしれませんが、代わりにいくつかの HelloComponent's の親コンポーネントや、あるいは AppModule . これは Globals が変更できない静的なデータしか持っていない場合（例えば定数のみ）には問題ないでしょう。しかし、そうではなく、例えば異なるコンポーネントやサービスがそのデータを変更したい場合は Globals は シングルトン . その場合、それが使用される階層の最上位に提供されるべきです。例えば、これが 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
  ]
})

また var を使うことはできません。

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

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

更新

ようやく、簡単な のデモを作成しました。 を作成し、そこに単一の Globals が 3 つのコンポーネントで共有されており、そのうちの 1 つが Globals.role .