且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

动态更改离子菜单侧

更新时间:2023-12-03 17:18:58

我能够直接通过HTMLElement更改ion-menu的侧面. 我知道不建议这样做,应该按照我试图使其在原始问题中起作用的方式进行处理,但这就是我尝试了多种不同方式后所能想到的全部内容.

I was able to change the side of the ion-menu via HTMLElement directly. I know this is not recommended and it should be handled the way I was trying to make it work in the original question, but that's all I could come up with after trying so many different ways.

我相信ion-menu所存在的问题及其在改变侧面方面的行为是一个错误.

I believe the problem I have with ion-menu and its behavior on changing the side is a bug.

这是我为了使其正常运行而进行的更改.

Here's what I've changed to get it working.

app.component.ts

export class MyApp {
  #...
  menuSide: string = "left";

  this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
      console.info(`Language change to ${event.lang}`);
      let element: HTMLElement = document.getElementById("lovelyMenu");

      if (event.lang == 'ar' || event.lang == 'fa') {
        this.platform.setDir('rtl', true);
        this.menuSide = 'right';
      } else {
        this.platform.setDir('ltr', true);
        this.menuSide = 'left';
      }

      element.setAttribute("side", this.menuSide);
      this.platform.setLang(event.lang, true);
    });
  }
  ...
}

app.html:

<ion-menu [content]="content" [side]="menuSide" id="lovelyMenu">
....