15 
/app
        - app.component.ts 
        - app.component.html (hide/show: menu bar)
        - app.global.service.ts (Public varible LoginSuccess:boolean)
        - main.ts
        /student
            - student.ts
            - student.service.ts
            - student.component.ts
            - student.component.html
        /security
            - login.component.ts (LoginSuccess = true)
            - login.component.html

Angular2 の私のアプリケーションでは、ログインの成功に基づいて非表示のメニュー バーを表示したいという単純なニーズがあります。[hidden]=LoginSuccessそのために、ログインコンポーネントに設定し、 nav タグの app.component.html で使用する LoginSuccess ブール変数を持つサービスを作成しました。

私が直面している問題は、値を介して注入した後でも持続app.global.service.tsせず、各コンストラクターが新しいオブジェクトを作成することです。constructorapp.component.ts & login.component.tsapp.global.service.ts

質問: サービスを通じてアプリケーション全体で単一の値を永続化するにはどうすればよいですか。Angular2 ドキュメントのどこかで、Injectable サービスはシングルトンであると読みました。

4

5 に答える 5

29

GlobalService各コンポーネントではなく、ブートストラップで提供する必要があります。

bootstrap(AppComponent, [GlobalService])

@Component({
  providers: [], // yes
  // providers: [GlobalService], // NO.
})
class AppComponent {
  constructor(private gs: GlobalService) {
    // gs is instance of GlobalService created at bootstrap
  }
}

この方法GlobalServiceはシングルトンになります。

より高度なアプローチについては、この回答を参照してください。

于 2016-02-17T19:15:43.733 に答える
7

app.component.ts内部にブーストラップする代わりに and を用意しapp.module.ts、サービスを に注入する必要がありますapp.component.ts。

...
import { MusicService } from './Services/music-service';

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    providers: [MusicService],
    ...
})
export class AppComponent {

constructor(private MS: MusicService) {

}
...

これは現在のAngular2ビルドに基づいています。そのため、どこにロードされているかが内部index.htmlにあるはずです。<app-root>AppComponent

他のコンポーネント内で使用するには、インポートするだけです。

import { MusicService } from './Services/music-service';

そしてそれを初期化します：

constructor(private MS: MusicService) {

}

概要：

  1. にインポートapp.component.ts
  2. app.component.tsとして挿入provider
  3. コンストラクタで初期化
  4. 他のすべてのコンポーネントで使用したい場合は、ステップ 2、3 を繰り返します。

参考：Angular Dependency Injection

于 2016-10-23T03:13:32.783 に答える
4

Saxsa として重要なポイントは、各コンポーネント レベルではなく、アプリケーション インジェクター内でサービス プロバイダーを定義することです。サービス プロバイダーを 2 回定義しないように注意してください。

このようにして、サービスの同じインスタンスを共有できます。

この動作は、Angular2 の階層型インジェクターが原因で発生します。詳細については、次の質問をご覧ください。

于 2016-02-17T20:04:59.300 に答える
4

最終リリース (Angular 2.0.0) の時点で:

サービスをインポートし、次のように providers 配列に挿入します。

import { GlobalService } from './app.global.service';

//further down:
@NgModule({
  bootstrap: [ App ],
  declarations: [
    // Your components should go here 
  ],
  imports: [ 
    // Your module imports should go here
  ],
  providers: [ 
    ENV_PROVIDERS // By Angular
    // Your providers should go here, i.e.
    GlobalService
  ]
});
于 2016-09-15T10:31:46.993 に答える