寻找离子 5 中事件的替代方案 [关闭]

Posted 2023-03-13

【中文标题】寻找离子 5 中事件的替代方案 [关闭]

【英文标题】：Searching alternative for events in ionic 5 [closed]

【发布时间】：2021-03-02 10:00:45

【问题描述】：

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 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()
      
    
    

这个事件服务如何添加参数？

【问题讨论】：

这能回答你的问题吗？ Ionic 4 Events not working in device but working on browser

【参考方案1】：

首先给 Su​​bject 一个类型，然后在调用 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)
  

【参考方案2】：

您可以通过在幕后使用主题来构建自己的“事件服务”：

// 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。

【讨论】：

非常感谢您的帮助..我是 ionic 新手，..

先生，实际上我需要调用注销...我在视图中有用户注销按钮和 login.ts 文件中的方法...你能告诉我如何使用事件来注销当刷新令牌过期时。谢谢

@Ajt 当然！你能用你的代码创建一个 Stackblitz 演示吗？如果需要，您可以使用 this starter :)