[英]Changing Ionic Menu side dynamically
I'm trying to change the Ionic 3 Menu side dynamically once user changes the language.一旦用户更改语言,我就会尝试动态更改 Ionic 3 菜单端。 For RTL languages menu needs to be on the right, by default it's set on left.
对于 RTL 语言菜单需要在右侧,默认设置在左侧。
I subscribe to TranslateService
from @ngx-translate/core
event when the language changes app.components.ts
:当语言更改
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);
});
The code above gets executed successfully when I the language gets changes and all the variables get set as expected (I've written unit tests to be sure and tons of console.logs while the app is running.)当我更改语言并且所有变量都按预期设置时,上面的代码会成功执行(我已经编写了单元测试,并在应用程序运行时编写了大量的 console.logs。)
In the template:在模板中:
<ion-menu [content]="content" [side]="isRTL?'right':'left'" side="{{menuSide}}">
....
</ion-menu>
However, even though the this.menuSide
changes in the controller, it won't work as expected.但是,即使控制器中的
this.menuSide
发生变化,它也不会按预期工作。
It seems the side can be changed only before platform.ready()
, once the platform.ready()
is done, no matter what I set it won't take any effects.似乎只能在
platform.ready()
之前更改侧面,一旦platform.ready()
完成,无论我设置什么都不会产生任何影响。
Edit :编辑:
I've tried to use the method in https://stackoverflow.com/a/46417869/636136 but that didn't fix it too.我尝试使用https://stackoverflow.com/a/46417869/636136 中的方法,但这也没有解决。
If I just print menuSide
in the template it would have the correct value on the screen, but doesn't have any effect on the menu direction.如果我只是在模板中打印
menuSide
,它将在屏幕上显示正确的值,但对菜单方向没有任何影响。
I can change the "side" attribute on the menu element manually via browser element inspector and it will change the direction successfully, however using menuSide
variable won't do the job.我可以通过浏览器元素检查器手动更改菜单元素上的“side”属性,它将成功更改方向,但是使用
menuSide
变量不会完成这项工作。
alternate solution, simple, smooth and works like a charm替代解决方案,简单,流畅,效果很好
In app.html在 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在 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;
}
I was able to change the side of the ion-menu
via HTMLElement
directly.我能够直接通过
HTMLElement
更改ion-menu
的一侧。 I know this is not recommended and it should be handled the way I was trying to make it work in the original question, but that's all I could come up with after trying so many different ways.我知道这是不推荐的,应该按照我在原始问题中尝试使其工作的方式进行处理,但这就是在尝试了这么多不同的方法后我所能想到的。
I believe the problem I have with ion-menu
and its behavior on changing the side is a bug.我相信
ion-menu
的问题及其改变侧面的行为是一个错误。
Here's what I've changed to get it working.这是我为使其正常工作所做的更改。
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
: app.html
:
<ion-menu [content]="content" [side]="menuSide" id="lovelyMenu">
....
Use property binding
instead of interpolation
.使用
property binding
而不是interpolation
。
ie [side]="menuSide"
即
[side]="menuSide"
<ion-menu [content]="content" [side]="menuSide">
....
</ion-menu>
put SIDE key in json file for each lang like for example:将 SIDE 键放入每个 lang 的 json 文件中,例如:
ar.json ar.json
"SIDE" : "right",
"SIDE" : "正确的",
and en.json和 en.json
"SIDE" : "left",
"SIDE" : "左",
and then in html然后在 html 中
<ion-menu [content]="content" side="{{'SIDE' | translate}}"
.... ....
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.