在2组件之间传递数据的可观察/订阅
问题描述:
我想从组件A(模态窗口)读取从一组值中选择的值。一旦在组件A上按下ok按钮,我希望将值传递给组件B(页面组件)。我有这方面的服务,并遵循这里指定的示例Delegation: EventEmitter or Observable in Angular2在2组件之间传递数据的可观察/订阅
我看到主题更新.next()。但是从我的用户,我没有看到,当我试图从成分B访问它的更新值
请帮我看看到底是什么问题在这里,
XService.ts
import { Injectable } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { Observable } from 'rxjs';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
@Injectable()
export class XService {
constructor(private modalService: NgbModal) {}
// Observable Item source
public _adModalSelectedSource = new BehaviorSubject<string>('w');
// Observable Item stream
selectedRow$ = this._adModalSelectedSource.asObservable();
// service command
changeNav(string) {
this._adModalSelectedSource.next(string);
}
}
元器件A.ts
btnClick(btn) {
if (btn.id === 'ok') {
this.XService.changeNav('yes');
this.activeModal.close(this.selectedRows);
} else {
this.activeModal.dismiss();
}
}
ComponentB.ts
import { Component, ViewChild} from '@angular/core';
import { NgbDropdownConfig, NgbTabset } from '@ng-bootstrap/ng-bootstrap';
import { Subscription} from 'rxjs/Subscription';
import { XService} from '../../x/x.service';
import { ActivatedRoute, Params } from '@angular/router';
@Component ({
selector: 'compb',
templateUrl: './compb.html',
styleUrls: ['./compb.component.scss'],
providers: [xService, NgbTabset]
})
export class ComponentB {
xService: XService;
test: any;
subscription:Subscription;
route: any;
tabs: any;
subTabs: { all: 'all', problemMachines : 'problem_machines' };
constructor(X:XService, tabs: NgbTabset, route: ActivatedRoute) {
this.xModalService = X;
this.route = route;
this.tabs = tabs;
this.subTabs = { all: 'all', problemMachines : 'problem_machines' };
}
SelectHandler(data) {
if (data.item.id === 'XXX') {
this.XService.openModal().then(() => {
**console.log('test value'+ this.test);**
console.log('close');
//this._loadData();
});
}
}
ngOnInit() {
this.filterText = '';
this.subscription = this.xService.selectedRow$.subscribe(test => this.test = test);
}
ngOnDestroy() {
//on destroy hook
this.subscription.unsubscribe();
}
}
SelectHandler是模块(组件A打开)用户选择一个值然后需要组件B(页面)处理的值的按钮的事件处理程序。
在组件B中,我将订阅放在onINit()中,但this.test没有更改的值。
任何投入,将不胜感激
答
我觉得现在的问题是,你有两个实例Xservice的,一个成分A和一个B组分的,因为你设置的是在提供财产的组件。你应该做一个模拟包装这两个组件,并在那里设置为XService的提供者。与此同时,将只有一个XService实例与这两个组件共享。
模块应该是这样的:
@NgModule({
imports: [],
declarations: [
ComponentA,
ComponentB
],
entryComponents: [
ComponentA,
ComponentB
],
providers: [XService],
exports: []
}
)export class MyModule {}
希望这有助于。