在Angular 2中交换兄弟组件之间的数据

Question

我在角度2中有一个父组件，有两个孩子是兄弟姐妹。 Sibling1有一个按钮，Sibling2只有一个h1元素，当按下Sibling1中的按钮时，它应该改变它的文本。我听说最好的方法是使用共享服务。但是我无法弄明白。按下按钮后文本不会更改。

父

导入SharedService并将其作为提供者

模板：

<sibling1></sibling1>
<sibling2></sibling2>

SharedService

import {Injectable} from '@angular/core';
import {Subject} from 'rxjs/Subject';

private text = new Subject<string>();
text$ = this.text.asObservable();

publishText(textToPublish: string){
    this.text.next(textToPublish);
}

Sibling1

import {SharedService} from './shared.service';

<button (click)="onClick()">press me</button>    

export class Sibling1{

    constructor(private ss: SharedService){}

    onClick(){
        this.ss.publishText('sample text');
    }

}

Sibling2

import {SharedService} from './shared.service';

<h1>{{text}}</h1>

export class Sibling2{

    text: string;

    constructor(private ss: SharedService){
        ss.text$.subscribe(data => this.text = data);
    }
 }

模块

导入ParentComponent，Sibling1，Sibling2和SharedService

并具有声明：ParentComponent，Sibling1，Sibling2

和提供者：[SharedService]

我也不确定我需要在app模块和父组件中声明哪些导入和提供程序。谢谢。

Answer 1

我创建了一个可以帮助你的plknr。看看http://plnkr.co/edit/60ncOxHwiOy8biiUc9mt?p=info

正如AJT_82所说，你可能忘了添加providers: [SharedService]

<强>更新

我更新了plunker以使用ngOnInit来获取订阅和ngOnDestroy，以便在组件被销毁时取消订阅。

Answer 2

如果我理解你的问题，我会选择观察。在兄弟2中的服务订阅中创建一个observable，并用兄弟1更改你需要的任何东西。

这可能有所帮助：http://blog.angular-university.io/how-to-build-angular2-apps-using-rxjs-observable-data-services-pitfalls-to-avoid/