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仅在整个应用程序中同时使用一次时才有效。

使用observables在兄弟姐妹Angular2之间传递数据

1 个答案: