angular - 动态更改 ionic 菜单侧

Question

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

当语言改变时，我从 @ngx-translate/core 事件订阅 TranslateService 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>

但是，即使 Controller 中的 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;
  }