Angular2-使用服务在组件之间共享数据 [英] Angular2 - Share data between components using services

问题描述

我有一个对象，希望在组件之间共享到Angular2应用程序中.

I have an object that I want to share between my components into an Angular2 app.

以下是第一个组件的来源:

Here is the source of the first component:

/* 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);
    }
}

和第二部分:

/* 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:

and finally my little service, the 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中填充了它.

My data are not shared, in the grid.component.ts, the _configService.getConfig() line return an empty object, but it is filled just before in the app.component.ts.

我阅读了文档和教程，没有任何效果.

I read the docs and tutorials, nothing worked.

我想念什么?

谢谢

已解决

我的问题是我两次注入了ConfigService.在应用程序的引导程序以及我正在使用它的文件中.

My issue was that I was injecting my ConfigService twice. In the bootstrap of the application and in the file where I'm using it.

我删除了providers设置，并且它起作用了！

I removed the providers setting and its worked !

推荐答案

您可以在两个组件中对其进行定义.因此，该服务未共享.您有一个AppComponent组件实例，另一个有Grid组件实例.

You define it within your two components. So the service isn't shared. You have one instance for the AppComponent component and another one for the Grid component.

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

快速的解决方案是将Grid组件的providers属性删除...这样，服务实例将由AppComponent及其子组件共享.

The quick solution is to remove the providers attribute to your Grid component... This way the service instance will be shared by the AppComponent and its children components.

另一种解决方案是在bootstrap函数中注册相应的提供程序.在这种情况下，实例将由整个应用程序共享.

The other solution is to register the corresponding provider within the bootstrap function. In this case, the instance will be shared by the whole application.

bootstrap(AppComponent, [ ConfigService ]);

要了解为什么需要这样做，您需要了解Angular2的分层注入器"功能.以下链接可能会有用:

To understand why you need to do that, you need to be aware of the "hierarchical injectors" feature of Angular2. Following links could be useful:

• 以角度2(测试版)将一项服务注入另一项服务的最佳方法是什么?
• https://angular.io/docs/ts/Latest/guide/hierarchical-dependency-injection.html

• What's the best way to inject one service into another in angular 2 (Beta)?
• https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html

这篇关于Angular2-使用服务在组件之间共享数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！