По проверке, существует разница между связанными классами стилей и между Chrome и другими браузерами с тем же разрешением экрана:
- в Chrome: оверлей типа меню с включенным меню, гидратированная разделенная панель, боковое меню, стартовое меню, панель видимая
- другой браузер: оверлей типа меню с поддержкой меню, боковое начало, гидратированное шоу-меню
Так что мой обходной путь, чтобы показать динамически разделенную панель слева / справа, это добавить условные классы в соответствии с разрешением:
<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();
}
Надеюсь, это поможет вам!