Question

我尝试在用户更改语言后动态更改Ionic 3菜单。对于RTL语言，菜单需要在右侧，默认情况下它设置在左侧。

当语言发生变化TranslateService时，我从@ngx-translate/core事件订阅了app.components.ts：

this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
  console.info(`Language change to ${event.lang}`);
  this.isRTL = event.lang == 'ar' || event.lang == 'fa';

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

  this.platform.setLang(event.lang, true);
});

当我的语言发生变化并且所有变量都按预期设置时，上面的代码会成功执行（我已经编写单元测试以确保在应用程序运行时有大量的console.logs。）

在模板中：

<ion-menu [content]="content" [side]="isRTL?'right':'left'" side="{{menuSide}}">
....
</ion-menu>

但是，即使控制器中的this.menuSide发生了变化，它也无法按预期工作。

一旦platform.ready()完成，似乎只能在platform.ready()之前改变一方，无论我设定它都不会产生任何影响。

修改：

我已尝试在https://stackoverflow.com/a/46417869/636136中使用该方法，但也没有修复它。

如果我只是在模板中打印menuSide，它会在屏幕上显示正确的值，但对菜单方向没有任何影响。

我可以改变＆＃34; side＆＃34;通过浏览器元素检查器手动对菜单元素进行属性，它将成功更改方向，但使用menuSide变量无法完成工作。

https://github.com/SavandBros/gonevis-mobile/blob/master/src/app/app.html

Answer 1

我可以直接通过ion-menu更改HTMLElement的一面。我知道这不是推荐的，它应该像我试图让它在原始问题中工作一样处理，但是在尝试了很多不同的方法之后我才能想到这一点。

我认为我对ion-menu的问题及其改变方面的行为是一个错误。

这是我为改变它而改变的。

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">
....

Github repo的提交时间是github.com/SavandBros/gonevis-mobile/commit/684e4ba4365594b7a7c10216267a16790538d158

Answer 2

使用property binding代替interpolation。

即 [side]="menuSide"

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

Answer 3

将SIDE键放在每个lang的json文件中，例如：

ar.json

＆＃34; SIDE＆＃34; ：＆＃34;对＆＃34;，

和en.json

＆＃34; SIDE＆＃34; ：＆＃34;左＆＃34;，

，然后在html中

 <ion-menu [content]="content" side="{{'SIDE' | translate}}"

....

Answer 4

替代解决方案，简单，流畅，并且像魅力一样

在app.html中

  <ion-content class="ttct-app-side-menu-content">
    <ion-list>
      <button menuClose ion-item *ngFor="let page of menuPages" (click)="openPage(page)">
        {{page}}
      </button>
    </ion-list>
  </ion-content>

</ng-template>

<ion-menu *ngIf="language === 'en'" type="overlay" side="right" [content]="content">
  <ng-container *ngTemplateOutlet="ttctSideMenuContent"></ng-container>
</ion-menu>

<ion-menu  *ngIf="language === 'ar'" type="overlay" side="left" [content]="content">
    <ng-container *ngTemplateOutlet="ttctSideMenuContent"></ng-container>
</ion-menu>

在app.component.ts中

this.translateService.onLangChange.subscribe((event: LangChangeEvent) => {
      if(this.translateService.currentLang === 'en') {
        platform.setDir('ltr', true);
      } else {
        platform.setDir('rtl', true);
      }
      platform.setLang(this.translateService.currentLang, true);
        });
.
.
.
.
.
  changeLanguage(lang) {
    this.translateService.use(lang);
    this.language = lang;
  }

动态更改离子菜单面

4 个答案: