La méthode `menuController.enable` de Ionic v4 ne fonctionne pas sur la première page chargée

Question

J'utilise un projet sidemenu avec ionic v4-beta3

Je veux désactiver le sidemenu sur certaines pages, /login par exemple.

Il fonctionne correctement lorsque je charge /home d'abord, puis je navigue vers /login page. Les menus secondaires disparaissent comme prévu.

Lorsque je recharge mon application sur /login page, le menu n'est pas désactivé.

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

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {

  constructor(
    private menuController: MenuController
  ) {}

  ngOnInit() {}

  ionViewWillEnter() {
    console.log('ionViewWillEnter');
    this.menuController.enable(false);
  }

  ionViewDidLeave() {
    console.log('ionViewDidLeave');
    this.menuController.enable(true);
  }

}

---

Si l'on utilise un setTimeout de 100 ou 200 ms pour appeler enable méthode, le menu latéral disparaît mais ce n'est pas très propre...

ionViewWillEnter() {
    console.log('ionViewWillEnter');
    const timer = setTimeout(() => {
        clearTimeout(timer);
        this.menuController.enable(false);
    }, 100);
}

---

Une autre solution consiste à afficher ion-menu quand window.location.pathName n'est pas égal à /login avec un *ngIf directive. Cela fonctionne mais je trouve que ce n'est pas très propre aussi...

---

Infos Ionic

Ionic:

   ionic (Ionic CLI)          : 4.1.1 
   Ionic Framework            : @ionic/angular 4.0.0-beta.3
   @angular-devkit/core       : 0.7.4
   @angular-devkit/schematics : 0.7.4
   @angular/cli               : 6.1.4
   @ionic/ng-toolkit          : 1.0.6
   @ionic/schematics-angular  : 1.0.5

Answer 1

Ce problème semble être résolu dans la version 4.0.0-beta.12 avec ce qui suit :

ionViewDidEnter() {
    this.menuController.enable(false);
}

ionViewDidLeave() {
    this.menuController.enable(true);
}

Answer 2

En MenuController.enable() est asynchrone.

Vous pouvez créer une garde Invité/Authentifié et l'activer à cet endroit, puis l'utiliser dans les pages en utilisant l'option canActivate dans vos pages. Ensuite, lorsque votre page se chargera, le menu sera configuré correctement. Par exemple, pour la garde authentifiée :

@Injectable({
  providedIn: 'root',
})
export class AuthenticatedGuard implements CanActivate {
  constructor(private menuController: MenuController) {}

  async canActivate(): Promise<boolean> {
    const isAuthenticated = true; // Adjust where you get this value
    await this.menuController.enable(isAuthenticated);

    return isAuthenticated;
  }
}

Cela fonctionnera pour Ionic4/5.

Vous devez utiliser menuId dans votre <ion-menu/> des composants pour affiner l'identité et être capable d'utiliser plusieurs menus. Vous pouvez ensuite appeler .enable(isAuthenticated, menuId);