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:

• 在 angular 2 (Beta) 中将一项服务注入另一项服务的最佳方法是什么?
• https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html

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