angular - 在 ionic 5 中搜索事件的替代方案
问题描述
离子 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 事件中被删除...我需要如何更改 wtt ionic5 ..请告诉我
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()
}
}
如何添加此事件服务的参数?
解决方案
您可以通过在幕后使用主题来构建自己的“事件服务”:
// 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 事件,因为它曾经在 Ionic 3 中工作。
推荐阅读
- excel - VBA 不会复制下一个表,而是继续粘贴第一个表
- ios - 游戏中心对接会自定义邀请
- c# - 添加映射值时属性设置为 null
- c++ - 保存文件并使控制台不关闭:Visual Studio 2019
- javascript - 在Javascript中获取从0到10000的所有二进制数字(1,10,11,100等)
- angular - 带 Jhipster 的 Angular Toastr
- arrays - 使用坐标数组将折线添加到地图
- r - R在2列上选择行的数据框中获取最小值
- image - 找不到 Directus 8 缩略图路径
- flutter - ListView.builder 中的 SwitchListTile 和 Container 或 RaisedButton 无法正常工作