在 ionic 5 中搜索事件的替代方案
Searching alternative for events in ionic 5
Ionic 4 组件:
import {Events} from '@ionic/angular';
constructor(private auth: AuthService, private events: Events) {}
intercept(req: HttpRequest<any>, next: HttpHandler) {
// Refresh token failed, logout user
this.events.publish('user:logout', 'La sesión ha expirado');
}
在 Ionic 5 中,事件被删除了...
我需要如何更改 w.t.t ioniq 5 ..请告诉我
EDIT ::
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({providedIn: 'root'})
export class EventService{
private formRefreshAnnouncedSource = new Subject();
formRefreshSource$ = this.formRefreshAnnouncedSource.asObservable();
publishFormRefresh(){
this.formRefreshAnnouncedSource.next()
}
}
如何给这个事件服务添加参数?
首先给 Subject 一个类型,然后在调用 next() 时传递一个参数,如下所示:
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({providedIn: 'root'})
export class EventService{
private formRefreshAnnouncedSource = new Subject<string>();
formRefreshSource$ = this.formRefreshAnnouncedSource.asObservable();
publishFormRefresh(eventName: string){
this.formRefreshAnnouncedSource.next(eventName)
}
}
您可以通过在幕后使用主题来构建自己的“事件服务”:
// app-events.enum.ts
export enum AppEvent {
UserLogout = 'UserLogout',
// ...
}
// app-events.service.ts
import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { filter, map } from 'rxjs/operators';
import { AppEvent } from '../enums/app-event.enum';
interface EventDetails {
event: AppEvent;
payload?: unknown;
}
@Injectable({ providedIn: 'root' })
export class AppEventsService {
private eventsDispatcher = new Subject<EventDetails>();
public dispatch(event: AppEvent, payload?: unknown): void {
this.eventsDispatcher.next({ event, payload });
}
public onEvent(event: AppEvent): Observable<unknown> {
return this.eventsDispatcher.asObservable().pipe(
filter((eventDetails) => eventDetails.event === event),
map((eventDetails) => eventDetails.payload),
);
}
}
然后你可以这样使用它:
// dispatch
this.appEventsService.dispatch(AppEvent.UserLogout, 'La sesión ha expirado');
// listen to events
this.appEventsService
.onEvent(AppEvent.UserLogout)
.subscribe((message: string) => {
console.log(message);
});
我敢肯定,如果您需要更好地支持有效负载中的类型,这可以改进,但它应该足以取代 Ionic Events,因为它曾经用于 Ionic 3。
Ionic 4 组件:
import {Events} from '@ionic/angular';
constructor(private auth: AuthService, private events: Events) {}
intercept(req: HttpRequest<any>, next: HttpHandler) {
// Refresh token failed, logout user
this.events.publish('user:logout', 'La sesión ha expirado');
}
在 Ionic 5 中,事件被删除了... 我需要如何更改 w.t.t ioniq 5 ..请告诉我
EDIT ::
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({providedIn: 'root'})
export class EventService{
private formRefreshAnnouncedSource = new Subject();
formRefreshSource$ = this.formRefreshAnnouncedSource.asObservable();
publishFormRefresh(){
this.formRefreshAnnouncedSource.next()
}
}
如何给这个事件服务添加参数?
首先给 Subject 一个类型,然后在调用 next() 时传递一个参数,如下所示:
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({providedIn: 'root'})
export class EventService{
private formRefreshAnnouncedSource = new Subject<string>();
formRefreshSource$ = this.formRefreshAnnouncedSource.asObservable();
publishFormRefresh(eventName: string){
this.formRefreshAnnouncedSource.next(eventName)
}
}
您可以通过在幕后使用主题来构建自己的“事件服务”:
// app-events.enum.ts
export enum AppEvent {
UserLogout = 'UserLogout',
// ...
}
// app-events.service.ts
import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { filter, map } from 'rxjs/operators';
import { AppEvent } from '../enums/app-event.enum';
interface EventDetails {
event: AppEvent;
payload?: unknown;
}
@Injectable({ providedIn: 'root' })
export class AppEventsService {
private eventsDispatcher = new Subject<EventDetails>();
public dispatch(event: AppEvent, payload?: unknown): void {
this.eventsDispatcher.next({ event, payload });
}
public onEvent(event: AppEvent): Observable<unknown> {
return this.eventsDispatcher.asObservable().pipe(
filter((eventDetails) => eventDetails.event === event),
map((eventDetails) => eventDetails.payload),
);
}
}
然后你可以这样使用它:
// dispatch
this.appEventsService.dispatch(AppEvent.UserLogout, 'La sesión ha expirado');
// listen to events
this.appEventsService
.onEvent(AppEvent.UserLogout)
.subscribe((message: string) => {
console.log(message);
});
我敢肯定,如果您需要更好地支持有效负载中的类型,这可以改进,但它应该足以取代 Ionic Events,因为它曾经用于 Ionic 3。