28

コンポーネント間で Angular2 アプリに共有したいオブジェクトがあります。

最初のコンポーネントのソースは次のとおりです。

/* app.component.ts */

// ...imports
import {ConfigService} from './config.service';

@Component({
    selector: 'my-app',
    templateUrl: 'app/templates/app.html',
    directives: [Grid],
    providers: [ConfigService]
})
export class AppComponent {
    public size: number;
    public square: number;

    constructor(_configService: ConfigService) {
        this.size = 16;
        this.square = Math.sqrt(this.size);

        // Here I call the service to put my data
        _configService.setOption('size', this.size);
        _configService.setOption('square', this.square);
    }
}

および 2 番目のコンポーネント:

/* grid.component.ts */

// ...imports
import {ConfigService} from './config.service';

@Component({
    selector: 'grid',
    templateUrl: 'app/templates/grid.html',
    providers: [ConfigService]
})
export class Grid {
    public config;
    public header = [];

    constructor(_configService: ConfigService) {
        // issue is here, the _configService.getConfig() get an empty object 
        // but I had filled it just before
        this.config = _configService.getConfig();
    }
  }

そして最後に、私の小さなサービスである ConfigService:

/* config.service.ts */

import {Injectable} from 'angular2/core';

@Injectable()
export class ConfigService {

    private config = {};

    setOption(option, value) {
        this.config[option] = value;
    }

    getConfig() {
        return this.config;
    }
}

私のデータは共有されていません.grid.component.tsでは、_configService.getConfig()行は空のオブジェクトを返しますが、app.component.tsの直前に入力されています.

ドキュメントとチュートリアルを読みましたが、何も機能しませんでした。

何が欠けていますか？

ありがとう

解決した

私の問題は、ConfigService を 2 回注入していたことです。アプリケーションのブートストラップと、それを使用しているファイル内。

設定を削除したところproviders、うまくいきました！

4

3 に答える 3

28

2 つのコンポーネント内で定義します。したがって、サービスは共有されません。コンポーネント用に 1 つのインスタンスがあり、AppComponentコンポーネント用に別のインスタンスがありGridます。

@Component({
  selector: 'my-app',
  templateUrl: 'app/templates/app.html',
  directives: [Grid],
  providers: [ConfigService]
})
export class AppComponent {
  (...)
}

簡単な解決策はproviders、Grid コンポーネントの属性を削除することです。このようにして、サービス インスタンスはAppComponentとその子コンポーネントによって共有されます。

もう 1 つの解決策は、対応するプロバイダーをbootstrap関数内に登録することです。この場合、インスタンスはアプリケーション全体で共有されます。

bootstrap(AppComponent, [ ConfigService ]);

なぜそれを行う必要があるのか​​を理解するには、Angular2 の「階層型インジェクター」機能を認識する必要があります。次のリンクが役立つ場合があります。

于 2016-02-08T15:22:19.733 に答える
6

angularの最新バージョンでは、サービスを共有したい場合、ブートストラップ機能に追加できません。通常のサービスで行うように、NgModule プロバイダー リストに追加するだけで、デフォルトの動作はシングルトンになります。

ブートストラップ (AppComponent);

@NgModule({
    declarations: [
        ....
    ],
    imports: [
       ....     
    ],
    providers: [
        ConfigService,
....
于 2016-10-18T21:53:23.967 に答える
4

コンポーネントに追加しないConfigServiceでprovidersください。これにより、すべてのコンポーネントの新しいインスタンスが作成されます。providers共通の親コンポーネントに追加します。ルート コンポーネントに追加するかbootstrap(App, [ConfigService])、アプリケーション全体で 1 つのインスタンスを共有する場合。

于 2016-02-08T15:23:27.917 に答える