离子4离子-打开关闭时菜单错误

Question

我希望你们都做得很好。

我在IONIC 4应用上遇到了一个菜单控制器的问题。

当用户单击菜单并打开和关闭它几次时，我收到错误，当它注销并重新登录时，它会使应用程序崩溃：

helpers-46f4a262.js:44 ASSERT: _before() should be called while animating

Uncaught (in promise) Error: ASSERT: _before() should be called while animating
    at assert (helpers-46f4a262.js:46)
    at Menu.afterAnimation (ion-menu_4-md.entry.js:340)
    at Menu._setOpen (ion-menu_4-md.entry.js:200)


beforeAnimation(shouldOpen) {
        assert(!this.isAnimating, '_before() should not be called while animating');
        // this places the menu into the correct location before it animates in
        // this css class doesn't actually kick off any animations
        this.el.classList.add(SHOW_MENU);
        if (this.backdropEl) {
            this.backdropEl.classList.add(SHOW_BACKDROP);
        }
        this.blocker.block();
        this.isAnimating = true;
        if (shouldOpen) {
            this.ionWillOpen.emit();
        }
        else {
            this.ionWillClose.emit();
        }
    }
    afterAnimation(isOpen) {
        assert(this.isAnimating, '_before() should be called while animating');
        // keep opening/closing the menu disabled for a touch more yet
        // only add listeners/css if it's enabled and isOpen
        // and only remove listeners/css if it's not open
        // emit opened/closed events
        this._isOpen = isOpen;
        this.isAnimating = false;
        if (!this._isOpen) {
            this.blocker.unblock();
        }
        if (isOpen) {
            // add css class
            if (this.contentEl) {
                this.contentEl.classList.add(MENU_CONTENT_OPEN);
            }
            // emit open event
            this.ionDidOpen.emit();
        }
        else {
            // remove css classes
            this.el.classList.remove(SHOW_MENU);
            if (this.contentEl) {
                this.contentEl.classList.remove(MENU_CONTENT_OPEN);
            }
            if (this.backdropEl) {
                this.backdropEl.classList.remove(SHOW_BACKDROP);
            }
            if (this.animation) {
                this.animation.stop();
            }
            // emit close event
            this.ionDidClose.emit();
        }
    }

Click here for STREAMABLE Link Video

是什么导致了这种情况？有什么解决方案吗？

我已经将菜单放到了app.component.html

这是代码：

<ion-app>
  <ion-menu [disabled]="this.profileService.profile.length === 0 || selectedRouter.includes('subscriptions-and-packages')" (ionDidOpen)="openMenu($event)" (ionDidClose)="closeMenu($event)" side="end" menuId="first" contentId="content1">
        <ion-header>
          <ion-toolbar>
            <ion-title>{{ 'menu' | translate }}</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content>
          <ion-list>
          <ion-menu-toggle auto-hide="true">
            <ion-item lines="none" (click)="goToEditprprofileFromMenu()">
              <ion-avatar slot="start" style="width: 30px; height: 30px; margin-right: 25px;">
                <img *ngIf="profileService.profile.profile_pic !== null; else noProfilePicFound" src="{{profileImageAPILink}}{{profileService.profile.id}}/{{profileService.profile.profile_pic}}">
                <ng-template #noProfilePicFound>
                  <img src="/assets/new-admify-icons/usersingle.svg">
                </ng-template>
                </ion-avatar>
                <ion-label>{{ 'my_profile' | translate }}</ion-label>
            </ion-item>
            <ion-item (click)="goToSubsciptions()" lines="none">
                <ion-icon slot="start" src="assets/new-admify-icons/subscriptions-active.svg"></ion-icon>
                <ion-label>{{ 'subscriptions' | translate }}</ion-label>
            </ion-item>
            <ion-item lines="none"  (click)="addAFeedback($event)">
              <ion-icon slot="start" color="primary" src="assets/new-admify-icons/feedback.svg"></ion-icon>
              <ion-label>{{ 'feedback' | translate }}</ion-label>
            </ion-item>
        <ion-item lines="none"  (click)="logout()" style="color: black ">
          <ion-icon slot="start" color="danger" src="assets/new-admify-icons/logout-active.svg"></ion-icon>
          <ion-label>{{ 'logout' | translate }}</ion-label>
        </ion-item>
          </ion-menu-toggle>
          </ion-list>
        </ion-content>
      </ion-menu>
  <ion-router-outlet id="content1"></ion-router-outlet>
</ion-app>

Answer 1

我得到了这个错误，并最终找到了原因。请在这里为其他任何人发帖。在禁用菜单后，我正在尝试修改打开/关闭菜单。

我的情况类似于这篇文章。注销后，我重定向到登录页面并禁用菜单(以防止使用手势滑动打开它)。然后，当我再次登录时，我忘记了启用它。所以，当我试图打开菜单时，我得到了这个错误。