Angular2材料侧向动态改变rtl/ltr方向
我试图根据用户的语言选择动态地改变我的布局，并动态地从LTR切换到RTL。
我用的是角2 rc6，材料2.0.0-α-9-3
看起来，当页面加载时，它与rtl或ltr都能很好地工作。然而，当它从应用程序内部动态变化时(参见柱塞)，方向会发生变化，但是生成的元素margin内容有一个计算错误的边距-右和边距-左。
更进一步，我发现_dir对象有一个eventEmitter，它应该监视_dir的更改事件并重新计算页边距。
@角/材料/侧移/侧移.：
_dir.dirChange.subscribe(function () { return _this._validateDrawers(); });但在动态改变方向时，它从来没有被调用过。尽管，当第一次加载页面时，_dir保持正确的值，无论是ltr还是rtl。
最后，下面是一个演示这种行为的柱塞：
http://plnkr.co/edit/o8lXWC?p=preview
我怀疑我没有正确地使用_dir，但没有找到正确的方法。
回答 3
Stack Overflow用户
发布于 2016-10-20 09:19:00
看一看源代码Dir指令
@Input('dir') _dir: LayoutDirection = 'ltr';如您所见，您正在更改_dir属性，而不是dir setter：
set dir(v: LayoutDirection) {
let old = this._dir;
this._dir = v;
if (old != this._dir) {
this.dirChange.emit(null);
}
}所以我认为你的解决方案应该是：
视图
<md-sidenav-layout fullscreen dir="ltr" #root="$implicit">
<select #langSelect (change)="changeLang(langSelect.value, root)">组件
changeLang(lang, root: Dir) {
this.translate.use(lang);
root.dir = lang == "fr" ? "rtl" : "ltr";
}这样，您就可以省略组件上的direction: string属性。
还有一个注意事项：
translate: TranslateService; //it's redundant `private translate: TranslateService` does it
direction: string; // omit it
constructor(private translate: TranslateService) {
this.direction = "ltr"; // omit it
translate.addLangs(["en", "fr"]);
translate.setDefaultLang('en');
let browserLang = translate.getBrowserLang();
translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
this.translate = translate; // it's redundant
}这是你的柱塞实例
如果你认为这是错误的决定，那就检查一下
希望这能帮到你！
Stack Overflow用户
发布于 2016-10-20 07:53:16
我一直试图使用"end“和"start”对齐属性来解决问题，但我不知道为什么不可能。我认为一个可能的解决方案是，您可以对NgStyle和边距进行一点“播放”，如我在下面的Plnkr中所示。
[ngStyle]="{'margin-right': move}"示例
希望这会有用。
Stack Overflow用户
发布于 2017-07-11 11:32:08
我不确定我对angular1所做的工作是否也适用于角2。
md-sidenav {
left: initial;
right: 0;
}
md-sidenav.md-closed {
transform: translate3d(100%, 0, 0);
}现在只为那些具有rtl方向的人添加一个类/属性，然后只选择它，就足够了。
https://stackoverflow.com/questions/40147248
复制相似问题
腾讯云开发者
