Question

我正在使用Ioni v4Beta，并在用户登录时通过托盘更新侧面菜单。

我搜索但通常的解决方案是使用事件：

https://ionicframework.com/docs/api/util/Events/

但是在新版本中我找不到它，而且我也不知道该怎么做

https://beta.ionicframework.com/docs/api

Answer 1

非常感谢，但我终于找到了导入方法：

import { Events } from '@ionic/angular';

Answer 2

关于如何处理对象的示例：

export const someEvent:Subject = new Subject();

export class ReceivingClass implements OnDestroy, OnInit
{
   private someEventSubscription:Subscription;
   public OnInit():void{
      someEventSubscription = someEvent.subscribe((data) => console.log(data); 
   }

   public onDestroy():void{
     someEvent.unsubscribe();
   }
}

export class SendingClass implements OnInit
{
   public OnInit():void{
        setTimeout(() => {
            someEvent.next('hi');
        }, 500);
   }
}

Answer 3

您是否知道Ionic v4事件将很快被弃用？

当用户登录时，我也试图更新侧面菜单，所以我尝试使用：import { Events } from '@ionic/angular';

但是我收到警告，提示我指向此链接https://angular.io/guide/observables#basic-usage-and-terms，但由于对可观察对象并不熟悉，所以我无法对其进行跟踪。

经过大量研究，我发现我仍然可以使用事件，但是必须从angular的router指令中导入它们。

这是我之前的代码：

/* import was */ import { Events } from '@ionic/angular'; import { Storage } from '@ionic/storage';//ignore this import if doesn't apply to your code

 /* inside the class */
  constructor(
  private events: Events,
  private storage: Storage 
  ) {

    this.events.subscribe("updateMenu", () => {

      this.storage.ready().then(() => {
        this.storage.get("userLoginInfo").then((userData) => {

          if (userData != null) {

            console.log("User logged in.");
            let user = userData.user;
            console.log(user);
          }
          else {
            console.log("No user found.");
            let user = {};
          }

        }).catch((error)=>{
                console.log(error);
              });

      }).catch((error)=>{
                console.log(error);
              });

    });

  }

我所做的更改实际上使我的代码正常工作，并且弃用警告消失了：

/* import is now */
import { Router,RouterEvent } from '@angular/router';
import { Storage } from '@ionic/storage';//ignore this import if it does't apply to your code

其他代码

constructor(
    public router: Router,
    public storage: Storage
  ){

    this.router.events.subscribe((event: RouterEvent) => {
        this.storage.ready().then(() => {
          this.storage.get("userLoginInfo").then((userData) => {

              if (userData != null) {
                /*console.log("User logged in.");*/
                let user = userData.user;
                /*console.log(this.user);*/
              }
              else {
                /*console.log("No user found.");*/
                let user = {};
              }

            }).catch((error)=>{
                console.log(error);
              });

        }).catch((error)=>{
          console.log(error);
        });

      });

}

看到这个https://meumobi.github.io/ionic/2018/11/13/side-menu-tabs-login-page-ionic4.html之后，我有了主意。我希望我的回答会有用。

Answer 4

解决问题的步骤

在登录页面和侧面菜单视图中导入事件

在登录页面中，登录成功后，请执行逻辑以发布事件。

例如：

this.authService.doLogin(payload).subscribe((response) => {
  if (response.status) {
     this.storage.set('IS_LOGGED_IN', true);
     this.events.publish('user:login');
  } 
}, (error) => {
   console.log(error);
});

在侧面菜单视图中，创建一个侦听器以观看事件“ user：login”

例如：

this.menus = [];

// subscribe events
this.events.subscribe('user:login', () => {
  // DO YOUR LOGIC TO SET THE SIDE MENU
  this.setSidemenu();
});

// check whether the user is logged in or not
checkIsUserloggedIn() {
   let isLoggedIn = false;
   if (this.storage.get('IS_LOGGED_IN') == '' || 
       this.storage.get('IS_LOGGED_IN') == null || 
       this.storage.get('IS_LOGGED_IN') == undefined) {
      isLoggedIn = false;
   } else {
      isLoggedIn = true;
   }
   return isLoggedIn;
}

// to set your sidemenus
setSidemenu() {
   let isUserLoggedIn = this.checkIsUserloggedIn();
   if(isUserLoggedIn) {
      this.menus = ['Home', 'Aboutus', 'Contactus', 'My Profile', 'Logout'];
   } else {
      this.menus = ['Login', 'Home', 'Aboutus', 'Contactus'];
   }
}

Ionic v4中的事件

4 个答案: