Angular 4/5/6グローバル変数

116

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

私は既にググって、過去3時間にわたってこれに関するStackOverflowの多くの投稿を読んでいましたが、それを機能させることができないようです。あなたが私を助けてくれることを本当に願っています、そして私はこの質問をすることをお詫び申し上げます。

したがって、globals.tsというファイルがあり、次のようになります。

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


@Injectable()
export class Globals {

  var role = 'test';

}

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

{{ role }}

次の方法で、globals.tsファイルをapp.module.tsにすでに追加しています。

providers: [
  Globals
],

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

あなたが私を助けてまた申し訳ないことを本当に願っています。

宜しくお願いします、

AE

angular typescript

— AE
ソース

4

export class Globals { var role = 'test'; }<-それは何ですか？

— zerkms 2017年

それは私のグローバル変数を格納したい私のクラスGlobalsになるはずです。たとえば、変数「ロール」には、グローバル変数が機能するかどうかをテストするためだけに、文字列「テスト」が含まれている必要があります。

— AE

ただし、有効なtypescriptではありません。

— zerkms 2017年

「var」を削除する必要がありますか？

— AE

使用についてはlocalStorageどうですか？

— suhailvs 2018

180

Angular Dependency InjectionをGlobals介してアプリの任意のポイントからエンティティにアクセスできます。一部のコンポーネントのテンプレートで値を出力する場合は、サービスのようにコンポーネントのコンストラクターを通じて注入する必要があります。Globals.roleGlobals

// 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';
}

更新

最後に、私はstackblitzで簡単なデモを作成しました。このデモでは、single Globalsが3つのコンポーネント間で共有され、そのうちの1 つがの値を変更できますGlobals.role。

— する
ソース

3

しかし、別のコンポーネント（something = globals.role;）で取得すると、「test」が取得されます。割り当てた値ではありません。

— punkouter 2017

3

@punkouter私はPlunkerデモリンクで回答を更新しました。それがあなたを助けることを願っています！

— 2017

3

これは少し古いスレッドですが、私はあなたを愛していると言いたいだけです。私の日を救った！

— Nie Selam 2018年

2

@AtulStha問題のおかげで、デモをPlunkerからStackblitzにシフトしました。

— 2018年

1

@GauravSachdeva SOに別の質問として問題を投稿できます。これが最良の選択肢だと思います。あなたが私にそれを見たいのであれば、コメントへのリンクを追加してください。

— 2018

22

そのための環境を利用しています。それは自動的に機能し、新しい注入可能なサービスを作成する必要はなく、私にとって最も便利です。コンストラクターを介してインポートする必要はありません。

1）自分の中で環境変数を作成しenvironment.ts

export const environment = {
    ...
    // runtime variables
    isContentLoading: false,
    isDeployNeeded: false
}

2）輸入environment.ts * .TSファイル内および作成パブリック変数（すなわち「ENV」）は、HTMLテンプレートで使用できるようにするには

import { environment } from 'environments/environment';

@Component(...)
export class TestComponent {
    ...
    env = environment;
}

3）テンプレートで使用...

<app-spinner *ngIf='env.isContentLoading'></app-spinner>

* .ts ...

env.isContentLoading = false

（テンプレートに必要ない場合は、environment.isContentLoadingのみ）

次のように、environment.ts内に独自のグローバルセットを作成できます。

export const globals = {
    isContentLoading: false,
    isDeployNeeded: false
}

これらの変数を直接インポートします（y）

— マーティン・スラフコフスキー
ソース

1

プロダクションビルドを作成するときはどうですか？2か所にすべてありますか？

— ムルペリ

2

これが最良の方法です。@Mulperi environment.tsでグローバルを作成する必要はありません。上記のエクスポートでappsディレクトリにglobals.tsを作成し、これらのグローバルを使用する場所にこのファイルをインポートするだけです。

— PrasadW 2018

1

同意する。私は最近、@ PrasadWが指摘したとおりにこのソリューションを変更しました。

— Martin Slavkovsky、2018

新しいAngularバージョンは、デフォルトでそのアプローチを正確に使用しています。あるenvironments/environment.tsとenvironments/environment.prod.ts、それは自動的に置き換えられます。

— ラグ

0

あまりお勧めしませんが、他の答えはどれも実際にはグローバル変数ではありません。真にグローバルな変数の場合、これを行うことができます。

Index.html

<body>
  <app-root></app-root>
  <script>
    myTest = 1;
  </script>
</body>

Angularのコンポーネントまたはその他

..インポート後の右上付近：

declare const myTest: any;

...後で：

console.warn(myTest); // outputs '1'

— ヘルツゲート
ソース

-2

Windowオブジェクトを使用して、どこからでもアクセスできます。例window.defaultTitle = "my title"; その後、何もインポートせずにwindow.defaultTitleにアクセスできます。

— 正義アディコ
ソース

これは避けたいものです。

— Scandinave