Angular2 - Обмен данными между компонентами с использованием служб

Question

У меня есть объект, который я хочу разделить между моими компонентами в приложении 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); 
    } 
} 

и второй компонент:

/* 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() возвращает пустой объект, bu t он заполняется непосредственно в app.component.ts.

Я читал документы и руководства, ничего не работало.

Что мне не хватает?

Благодаря

решаемые

Мой вопрос заключается в том, что я инъекционного мой ConfigService дважды. В бутстрапе приложения и в файле, где я его использую.

Я удалил настройку providers и ее работу!

Answer 1

Вы определяете его в своих двух компонентах. Таким образом, услуга не используется. У вас есть один экземпляр для компонента AppComponent, а другой - для компонента Grid.

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

Быстрое решение заключается в удалении атрибута providers в компоненте сетки ... Таким образом, экземпляр службы будет разделяемое AppComponent и его детей компонентов.

Другим решением является регистрация соответствующего провайдера в пределах функции bootstrap. В этом случае экземпляр будет совместно использоваться всем приложением.

bootstrap(AppComponent, [ ConfigService ]); 

Чтобы понять, почему вы должны сделать это, вы должны быть осведомлены о «иерархические инжекторов» особенность Angular2. Эти ссылки могут быть полезными:

• 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

Answer 2

Не добавляйте ConfigService к providers вашего компонента. Это приводит к появлению новых экземпляров для каждого компонента. Добавьте его к providers общего родительского компонента. Если вы добавите его в свой корневой компонент или bootstrap(App, [ConfigService]), ваше приложение будет иметь один экземпляр.

Answer 3

Для последней версии углового, если вы хотите поделиться службой, вы не можете добавить ее в функцию начальной загрузки. Просто добавьте его в список поставщиков NgModule, как и обычный сервис, его поведение по умолчанию будет одноточечным.

бутстрап (AppComponent);

@NgModule({ 
    declarations: [ 
     .... 
    ], 
    imports: [ 
     ....  
    ], 
    providers: [ 
     ConfigService, 
....