离子 4 拆分窗格 - 侧边菜单无法滑动

Question

我刚刚使用拆分窗格模板初始化了一个新的 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>

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

Answer 1

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

• 在 Chrome 中：菜单类型叠加层菜单启用水合拆分窗格侧菜单侧开始菜单窗格可见
• 其他浏览器：菜单类型覆盖 启用菜单侧启动水合显示菜单

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

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

在我的应用程序中：

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

希望对您有所帮助！