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

Posted 2023-03-22

【中文标题】如何根据屏幕尺寸从离子菜单中动态更改一侧？

【英文标题】：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

【参考方案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')