我有一个带有输出事件的嵌套子组件,我想从父组件监听此事件,但我不知道如何,我有4个级别:
我试图将事件从孩子3传递给孩子2,将孩子2传递给孩子并传递给父母,但是我认为这不是最好的方法。
-Parent (From this I want listen the event)
--Child
----Child 2
------Child 3 (This have the Event)
答案 0 :(得分:1)
尽管您可以使用@Output
事件发射器来执行此操作,但我建议您创建一个共享服务来代替它,因为存在很多嵌套级别。
您可以执行以下操作,并将服务注入到您的两个组件中。一个将发出消息(您的嵌套子组件),另一个将侦听消息(您的顶级组件)。
定义您的服务
@Injectable({
providedIn: 'root'
})
export class CommunicationService {
@Output() message$: EventEmitter<boolean> = new EventEmitter();
sendMessage(message: String) {
this.change.emit(message)
}
}
将其注入您的组件中
constructor(private communicationService: CommunicationService) { }
在您要从中发送消息的组件中
sendMessage() {
this.communicationService.sendMessage('This is a message from deep below!');
}
然后在您的侦听器组件中,订阅事件发射器
ngOnInit() {
this.communicationService.message$.subscribe(message => {
console.log(message);
});
}
答案 1 :(得分:1)
来源 Dan Wahlin (ng-conf:精通主题:RxJS中的通信选项),当您需要更深层次的组件与更高级别的组件进行通讯时,不建议使用OutPut杠杆组件,假设您有5个或6个左腿!,您必须改用主题: 您可以通过可观察的服务创建和事件总线
事件如果需要,这里是事件的枚举
export enum Events{
'payment done',
// other events here
}
@Injectable()
export class EventService {
private subject$ = new Subject()
emit(event: EmitEvent) {
this.subject$.next(event);
}
on(event: Events, action: any): Subscription {
return this.subject$.pipe(
filter((e: EmitEvent) => e.name == event),
map((e: EmitEvent) => e.value)).subscribe(action);
}
}
现在假设您想从 Child3 发出事件,例如,在付款后=>通知父组件
export class Child3Component implements OnInit {
constructor(public eventservice : EventService ) {}
pay(paymentAmount: any) {
this.eventservice.emit(
new EmitEvent('payment done',paymentAmount));
}
}
现在在您的父组件中,您可以调用这样的方法,您将获得事件
export class ParentComponent implements OnInit {
constructor(public eventservice : EventService ) {}
ngOnInit() {
this.eventservice.on('payment done', (paymentAmount => console.log(paymentAmount));
}
}