如何根据屏幕尺寸从离子菜单中动态更改一侧？答案

【问题标题】：How to change side dynamically from Ion Menu depending of screen size?如何根据屏幕尺寸从离子菜单中动态更改一侧？
【发布时间】：2020-06-08 04:28:09
【问题描述】：

我正在使用 Ionic 4，我想从 ion-menu 动态更改 side 属性，我注意到当你在大屏幕上工作时，ion-menu 总是可见或静态的，但在小屏幕上是隐藏的，直到你点击离子菜单按钮，所以我想在大屏幕上将离子菜单放在左侧，在小屏幕上放在右侧。

app.component.html

<ion-app>
  <ion-split-pane contentId="main-content">
    <ion-menu contentId="main-content" type="overlay" side="{{side}}">
      <ion-content>
        <ion-list id="inbox-list">
          <ion-list-header>Menu</ion-list-header>
          <ion-note *ngIf="tokenData">
            {{ tokenData.email}} 
          </ion-note>

          <ion-menu-toggle auto-hide="false" *ngFor="let p of menuPages; let i = index">
            <ion-item *ngIf="menuService.showPage(tokenData, p) && p.url" (click)="selectedIndex = i; menuService.clickPage(p.code)" routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" [class.selected]="selectedIndex == i">
              <fa-icon slot="start" [icon]="p.icon"></fa-icon>

              <ion-label>{{ p.title }}</ion-label>
            </ion-item>

            <ion-item *ngIf="menuService.showPage(tokenData, p) && !p.url" (click)="selectedIndex = i; menuService.clickPage(p.code)" lines="none" detail="false" [class.selected]="selectedIndex == i">
              <fa-icon slot="start" [icon]="p.icon"></fa-icon>

              <ion-label>{{ p.title }}</ion-label>
            </ion-item>
          </ion-menu-toggle>

        </ion-list>

      </ion-content>
    </ion-menu>
    <ion-router-outlet id="main-content"></ion-router-outlet>
  </ion-split-pane>
</ion-app>

app.component.ts（我有这个函数 sideMenu() 但只执行一次）

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

import { Platform,MenuController } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';


import { AuthService } from './auth/services/auth.service';
import { MenuService } from './shared/services/menu.service';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent implements OnInit {
  public selectedIndex = 0;
  tokenData = null;
  menuPages = [];
  side = 'end';
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private authService: AuthService,
    private menuService: MenuService,
    private menu: MenuController,
  ) {
    this.initializeApp();
    // Initialize BackButton Event.
    this.menuService.backButtonEvent();
    this.menuPages = this.menuService.menuPages;
  }



  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.backgroundColorByHexString('#D4AF37');
      /*
      status bar is not working with the deault styleDefault();
       this.statusBar.styleDefault();
      */
      this.splashScreen.hide();
    });
  }

  sideMenu(){
    this.menu.isOpen().then(open => { 
      if(open){
        this.side = 'end';
      }
      this.side = 'start';
     });
  }

  ngOnInit() {
    this.sideMenu();

    this.authService.getTokenData().subscribe(
      tokenData => { 
        this.tokenData = tokenData;
      }
    );
    const path = window.location.pathname.split('home/')[1];
    if (path !== undefined) {
      this.selectedIndex = this.menuPages.findIndex(page => page.title.toLowerCase() === path.toLowerCase());
    }

  }

}

在左侧的大屏幕上正常工作，请参见图片 correct side

在小屏幕上在左侧显示菜单，但我希望在右侧 incorrect side, it should be the right side with the ion-menu-button

【问题讨论】：

标签： html angular typescript ionic-framework

【解决方案1】：

使用“何时”参数

<ion-split-pane contentId = "main-content" when="lg">

【讨论】：

【解决方案2】：

您可以通过以下方式检查屏幕宽度

public devWidth = this.platform.width();

然后像这样更改您的 sideMenu 方法

sideMenu() {
   this.devWidth > 576 ?( this.side = 'end'):( this.side = 'start')
  }

【讨论】：