Ionic 4 拆分窗格 - 侧边菜单无法滑入答案

【问题标题】：Ionic 4 split pane - side menu cannot be swiped inIonic 4 拆分窗格 - 侧边菜单无法滑入
【发布时间】：2018-09-01 12:56:32
【问题描述】：

我刚刚使用拆分窗格模板初始化了一个新的 Ionic 4 项目。

所以我有一个带有侧边菜单的应用程序，应该可以刷入。但它不起作用。在文档中它正在工作： https://beta.ionicframework.com/docs/api/split-pane

代码如下：

<ion-app>
  <ion-split-pane when="md">
    <ion-menu>
      <ion-header>
        <ion-toolbar>
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
              <ion-icon slot="start" [name]="p.icon"></ion-icon>
              <ion-label>
                {{p.title}}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

有人知道我错过了什么吗？

【问题讨论】：

标签： angular gesture ionic4

【解决方案1】：

通过检查，Chrome 和其他具有相同屏幕分辨率的浏览器之间的关联样式类存在差异：

在 Chrome 中：menu-type-overlay menu-enabled hydrad split-pane-side menu-side-start menu-pane-visible
其他浏览器：menu-type-overlay menu-enabled menu-side-start hydrad show-menu

所以我在左/右显示动态拆分窗格的解决方法是根据分辨率添加条件类：

<ion-menu [side]="sideMenu"
        [ngClass]="{'split-pane-side': sideMenu == 'start', 'menu-pane-visible': sideMenu == 'start', 'show-menu': sideMenu == 'end'}">

在我的 app.component.ts 中：

@HostListener('window:resize', ['$event'])
    onResize(event: Event): void {
        this.sideMenu = this.platform.width() > 767 ? 'start' : 'end';
        this.changeDetectorRef.detectChanges();
        this.changeDetectorRef.markForCheck();
    }

希望对你有帮助！

【讨论】：