logo标签列表

动态更改Ionic菜单位置

angulartypescriptionic-frameworkionic3
4
我正在尝试在用户更改语言时动态更改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>

然而，即使在控制器中更改了this.menuSide，它也不会按预期工作。

似乎只能在platform.ready()之前更改侧边栏，一旦platform.ready()完成，无论我设置什么都不会产生任何效果。

编辑:

我尝试使用https://dev59.com/5KXja4cB1Zd3GeqPRneO#46417869中的方法，但也没有解决问题。

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

我可以通过浏览器元素检查器手动更改菜单元素上的“side”属性，并成功更改方向，但使用menuSide变量无法完成该任务。

4个回答
3

备选解决方案，简单、流畅，并且像魅力一样有效

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

In 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;
  }
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">
....
1
使用属性绑定代替插值。
即[side]="menuSide"。
<ion-menu [content]="content" [side]="menuSide">
....
</ion-menu>
我也尝试过那个，但没有用。我已经尝试了无数种方法，但都不起作用。如果我打开元素检查器，侧边栏的值仍然是“left”，即使我在控制台记录的值是“right”。问题是，如果我在platform.ready()之前初始化“menuSide”，它将起作用，但在此之后就不起作用了。完整的源代码可在https://github.com/SavandBros/gonevis-mobile/blob/master/src/app/app.html找到。 - Alireza Savand
0
将 SIDE 键放入每种语言的json文件中，例如：

ar.json

"SIDE": "right"，以及en.json中的"SIDE": "left"，然后在HTML中。
 <ion-menu [content]="content" side="{{'SIDE' | translate}}"

....

不，那也不行。奇怪的是，无论我尝试了多少种方法，在ion-menu标签上都没有任何变化。 - Alireza Savand
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接