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

Question

我有一个 Angular 为 2 的父组件，它有两个 sibling 。Sibling1 有一个按钮，Sibling2 只有一个 h1 元素，当 Sibling1 中的按钮被按下时，它应该改变它的文本。我听说最好的方法是使用共享服务。但是我无法弄清楚。按下按钮后文本不会更改。

parent

导入 SharedService 并将其作为提供者

模板:

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

共享服务

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

sibling 1

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

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

export class Sibling1{

    constructor(private ss: SharedService){}

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

}

sibling 2

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]

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

Answer 1

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

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

更新

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