我有自举模式,我保存一些数据,保存后我想在文本框中选择数据 . Modal是在子组件中加载我在app模块的entryComponents中提到的 .
现在在这样的套装中进行通信我已经添加了服务来管理组件之间的通信 .
在这里我的服务
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class EmitterService {
private events = new Subject();
private eventSetSource = new Subject<any>();
private eventCompletedSource = new Subject<any>();
// Observable string streams
eventSet$ = this.eventSetSource.asObservable();
eventCompleted$ = this.eventCompletedSource.asObservable();
// Service message commands
set(obj: any) {
this.eventSetSource.next(obj);
}
}
这是模态/子组件:
import { EmitterService } from 'app/shared-services/emitter/emitter.service';
@Component({
selector: 'app-short-organization',
templateUrl: './short-organization.component.html',
styleUrls: ['./short-organization.component.css'],
providers: [SessionService, ContactOrganizationService, ToastService, EmitterService]
})
export class ShortOrganizationComponent extends DialogComponent<ConfirmModel, boolean> implements ConfirmModel, OnInit {
title: string;
message: string;
public _formGrp: FormGroup;
constructor(dialogService: DialogService,
private _emitterService: EmitterService
) {
super(dialogService);
_emitterService.eventCompleted$.subscribe(x => {
console.log(x);
})
}
ngOnInit() {
}
onSubmit() {
let _userDetail = this.sessionService.getCurrentUser();
var obj = { id: 0, value: 'xyz'};
this._emitterService.set(obj);
}
父组件:
import { Component, OnInit,OnDestroy } from '@angular/core';
import 'rxjs/add/operator/takeUntil';
import { Subject } from 'rxjs/Subject';
import { ShortOrganizationComponent } from 'app/modules/manage-organization/short-organization/short-organization.component';
import { EmitterService } from 'app/shared-services/emitter/emitter.service';
@Component({
selector: 'app-contact',
templateUrl: './contact.component.html',
styleUrls: ['./contact.component.css'],
providers: [
EmitterService
]
})
export class ContactComponent implements OnInit,OnDestroy {
private ngUnsubscribe: Subject<void> = new Subject<void>();
constructor(
private _emitterService: EmitterService
) {
debugger
this._modalSubs = _emitterService.eventSet$.subscribe(
x => {
debugger;
console.log(x);
this.onSaveSelect(x);
},
error=>{
debugger;
console.log(error);
}
);
}
ngOnInit() {
}
onSaveSelect(val) {
debugger
}
ngOnDestroy(): void {
this.ngUnsubscribe.next();
this.ngUnsubscribe.complete();
}
}
}
在这里,我使用ng2-bootstrap-modal使用dailog服务调用此子组件:
openOrganizationModal() {
let disposable = this._dialogService.addDialog(ShortOrganizationComponent, {
title: 'Confirm title',
message: 'Confirm message'
}, { backdropColor: 'rgba(23, 19, 19, 0.5)' })
.subscribe((x) => {
console.log(x)
});
}
此代码在我的父组件中加载我的子组件,并在单击某个按钮时调用此方法 .
在值集上,我的父订阅代码没有被调用 . 这里有什么遗漏? ****我已经从申请中复制了它
1 回答
在父组件(或
@NgModule()
)上提供EmitterService
only ,否则每个组件都将获得自己的实例,这使得无法进行通信,因为一个组件正在侦听与另一个组件用于发送事件的实例不同的实例 .