Ionic 3：隐藏侧边菜单时出错（无法读取 null 的属性 'raf'）

Question

我有一个 Ionic v3 应用程序，它有一个登录页面和一个只有在用户登录时才会出现的侧边菜单（带有注销按钮）。

当我注销时，侧边菜单消失了，因为 ion-menu 中的 *ngIf。然后发生此错误：

TypeError: Cannot read property 'raf' of null
    at http://localhost:8100/build/vendor.js:21030:23

我的代码：

app.component.ts:

logout(): void {
    this._userService.logout();
    this.nav.setRoot(LoginPage);
}

get loggedUser() {
    return this._userService.loggedUser();
}

app.html:

 <ion-menu [content]="content" *ngIf="loggedUser">
    <ion-content>           
        <ion-item id="header-menu">
            <h2>{{ loggedUser?.name }}</h2>
            <p>{{ loggedUser?.email }}</p>
        </ion-item>

        <ion-list>
            <button menuClose ion-item (click)="logout()"> Exit </button>
        </ion-list>
    </ion-content>
</ion-menu>
<ion-nav [root]="rootPage" main #content swipeBackEnabled="false"></ion-nav>

user.service.ts:

private _loggedUser: any;

logout() {
    this._loggedUser = null;
}

get loggedUser() {
    return this._loggedUser;
}

最小可重现示例： https://stackblitz.com/edit/ionic-offg7d

重现步骤：点击登录按钮，点击左侧菜单，点击退出选项

Answer 1

我建议您不要在离子菜单上使用 *ngIf，因为这会产生问题。

您可以尝试使用MenuController。我用我的解决方案测试了您创建的示例并且它有效。请参阅下面的菜单控制器实现。

App.html

<ion-menu [content]="content">
    <ion-content>           
        <ion-item id="header-menu">
            <h2>Name:</h2>
            <p>{{ loggedUser?.name }}</p>
        </ion-item>

        <ion-list>
            <button menuClose ion-item (click)="logout()"> Exit </button>
        </ion-list>
    </ion-content>
</ion-menu>
<ion-nav #content [root]="rootPage"></ion-nav>

app.component.ts

import { Component } from '@angular/core';
import { Platform, MenuController, App } from 'ionic-angular';

import { LoginPage } from '../pages/login/login';
import { UserService } from '../service/user.service';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {

  rootPage:any = LoginPage;

  constructor(platform: Platform, private userService: UserService,
    private menu: MenuController, private app: App) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.menu.enable(false);
    });
  }

  logout() {
    this.menu.enable(false);
    this.userService.logout();
    this.app.getActiveNav().setRoot(LoginPage);
  }
}

login.ts

import { Component } from '@angular/core';
import { NavController, MenuController } from 'ionic-angular';

import { HomePage } from '../home/home';

import { UserService } from '../../service/user.service';

@Component({
  selector: 'login-home',
  templateUrl: 'login.html'
})
export class LoginPage {

  login = 'name';
  password = 'email@email.com';

  constructor(public navCtrl: NavController, private userService: UserService,
            private menu: MenuController) {

  }

  doLogin() {
    let user = {
      name: this.login,
      password: this.password
    }
    this.userService.login(user);
    this.navCtrl.setRoot(HomePage);
    this.menu.enable(true);
  }

}

Ionic 3：隐藏侧边菜单时出错（无法读取 null 的属性 'raf'）

Ionic 3: Error when hide Side Menu (Cannot read property 'raf' of null)

ionic3

angular

Ionic 3：隐藏侧边菜单时出错（无法读取 null 的 属性 'raf'）

Ionic 3: Error when hide Side Menu (Cannot read property 'raf' of null)

ionic3

angular

Ionic 3：隐藏侧边菜单时出错（无法读取 null 的属性 'raf'）