使用可观察对象在兄弟 Angular2 之间传递数据

Question

我正在尝试在两个组件之间传递数据，例如 B 和 C，它们处于同一级别并被一个组件使用，例如 A。

现在在 A 的模板中，我像这样使用 B 和 C：

<div><b></b></div>
<div><c></c></div>

B 是一个下拉组件，而 C 组件想要使用选定的下拉值。

我创建了一个服务来获取这样的下拉值：

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

@Injectable()
export class PassValueService {


private valueSource = new Subject<Array<string>>();

value$ = this.valueSource.asObservable();

passValue(data: Array<string>) {
 console.log('inside pass value service', data);
 this.valueSource.next(data);
 this.valueToBePassed = data;
}

}

现在在 C 组件中，我尝试像这样订阅事件：

 constructor(private passValueService: PassValueService)

 this.subscription = this.passValueService.value$.subscribe(data=> {
  console.log('constructor', data);
});

我尝试在构造函数、ngOnInit、ngDoCheck 中执行此操作，但没有任何帮助。

任何机构都可以帮助我理解为什么我没有从 Observable 中获得价值吗？让我知道是否可以使用其他方法。

Answer 1

兄弟姐妹更简单的方法是使用模板变量和绑定

<div><b #b></b></div>
<div><c [selected]="b.selected"></c></div>

其中 C 有一个输入

@Input() selected:string; // or any other type

对于您的服务，请确保仅提供一次。例如在父组件中。如果服务在 B 或 C 提供，则不能在兄弟姐妹之间共享。

如果您在@NgModule() 中提供它，那么您的整个应用程序将共享同一个实例。仅当 B 和 C 在您的整个应用程序中同时使用一次时才有效。