☰

Angular 4/5/6 グローバル変数 質問する

tag-icon • tag-icon angular typescript
Angular 4/5/6 グローバル変数 質問する

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

私のファイルはグローバル、次のようになります。

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


@Injectable()
export class Globals {

  var role = 'test';

}

そして、コンポーネントの HTML ビューで変数ロールを次のように使用したいと思います。

{{ role }}

私はすでにglobals.tsファイルをアプリモジュール次のようにします。

providers: [
  Globals
],

このファイルで何をしても、うまくいきませんでした。すべてのコンポーネントで globals.ts ファイルを手動でインポートするのは避けたいので、プロバイダー機能を使用することにしました。

ベストアンサー1

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'sAppModuleGlobalsGlobalsシングルトンその場合、使用される階層の最上位レベルで提供する必要があります。次のようになります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';
}

アップデート

最後に、シンプルなStackBlitz のデモここで、 single はGlobals3 つのコンポーネント間で共有されており、そのうちの 1 つが の値を変更できますGlobals.role。

おすすめ記事