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

【问题标题】：how to change the direction of menu to rtl ionic2?如何将菜单的方向更改为 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

标签： javascript cordova angular ionic2

【解决方案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);

【讨论】：