如何将菜单的方向更改为 rtl ionic2？

Posted 2023-03-22

【中文标题】如何将菜单的方向更改为 rtl ionic2？

【英文标题】：how to change the direction of menu to rtl ionic2?

【发布时间】：2017-05-25 08:26:45

【问题描述】：

离子版本 3.3.0：

<ion-menu [content]="Menu"
          [class.rtl]="isRtl"
          [attr.side]="isRtl?'right':'left'">
</ion-menu>

我根据用户选择的语言改变方向， 它工作正常，除非菜单更改为 rtl 方向，菜单从左到右打开（如动画），并且仍然从左到右滑动。 请注意，我不想复制我的菜单，一个用于 rtl，一个用于 ltr，因为它也不适用于新版本 3.3.0

【问题讨论】：

我也做了两个菜单，一个用于 rtl，另一个用于 ltr (side="left" ) (side="right") 但在最新版本 3.3.0 中它已损坏，无法正常工作，我无法返回旧版本，因为新版本解决了另一个问题（如改变方向时翻转图标）

哦好的，我在 3.1.2

【参考方案1】：

this.menu._type = null; 

一旦你更新了菜单面，设置 menu._type 为 null，这样它就会为新的平台方向重新计算动画。

【参考方案2】：

我通过使用 css 的解决方法解决了它， 我做了两个菜单，一个用于 rtl 侧（右），另一个用于 ltr（左） 我在 app.scss 文件中添加了以下内容：

[dir="rtl"]
  ion-menu[side=right] > .menu-inner 
    right: 0;
    direction: ltr;
  

  ion-menu[side=right] ion-icon[aria-label^="arrow"]::before, ion-icon[flip-rtl]::before 
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    margin-left: 8px;
  

并从 html 标签更改 dir 属性（rtl ot ltr）：当您需要时：

this.platform.setDir('rtl',true);