Question

离子版3.3.0：

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

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

Answer 1

this.menu._type = null;

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

Answer 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);

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

2 个答案: