要发送和接收全局事件,可以使用Angular的EventEmitter和Subscription。
首先,在一个全局事件服务中创建一个EventEmitter:
import { Injectable, EventEmitter } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class GlobalEventsService {
public myEvent: EventEmitter = new EventEmitter();
constructor() { }
}
接下来,在发送事件的组件中注入全局事件服务,并在需要发送事件的地方调用EventEmitter的emit方法:
import { Component } from '@angular/core';
import { GlobalEventsService } from 'path/to/global-events.service';
@Component({
selector: 'app-sender',
template: `
`
})
export class SenderComponent {
constructor(private globalEventsService: GlobalEventsService) { }
sendEvent() {
this.globalEventsService.myEvent.emit({ data: 'Event Data' });
}
}
最后,在接收事件的组件中也注入全局事件服务,并订阅EventEmitter的事件:
import { Component, OnDestroy } from '@angular/core';
import { GlobalEventsService } from 'path/to/global-events.service';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-receiver',
template: `
{{ receivedData }}
`
})
export class ReceiverComponent implements OnDestroy {
receivedData: string;
private eventSubscription: Subscription;
constructor(private globalEventsService: GlobalEventsService) {
this.eventSubscription = this.globalEventsService.myEvent.subscribe((eventData) => {
this.receivedData = eventData.data;
});
}
ngOnDestroy() {
this.eventSubscription.unsubscribe();
}
}
现在,当发送组件中的按钮被点击时,事件将被发送到接收组件,并在接收组件的模板中显示。