动态更改离子菜单侧

Question

一旦用户更改语言，我正在尝试动态更改 Ionic 3 菜单端。 RTL 语言菜单需要在右侧，默认设置在左侧。

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

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，它将在屏幕上显示正确的值，但对菜单方向没有任何影响。

我可以通过浏览器元素检查器手动更改菜单元素上的“side”属性，它会成功更改方向，但是使用menuSide 变量将无法完成这项工作。

• 源代码在https://github.com/SavandBros/gonevis-mobile/blob/master/src/app/app.html

Answer 1

另一种解决方案，简单、流畅且效果极佳

在 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;
  }

Answer 2

我可以通过HTMLElement 直接更改ion-menu 的一侧。 我知道不建议这样做，应该按照我在原始问题中尝试使其工作的方式来处理它，但在尝试了这么多不同的方式之后，我只能想到这些。

我相信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">
....

Answer 3

使用property binding 而不是interpolation。

即[side]="menuSide"

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

Answer 4

将 SIDE 密钥放入每个语言的 json 文件中，例如：

ar.json

“边”：“对”，

和en.json

"SIDE" : "左",

然后在html中

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

....