Angular2材料sidenav - 动态改变rtl / ltr方向

Question

我正在尝试根据用户的语言选择动态更改布局，并即时从 LTR 切换到 RTL。

我正在使用 Angular 2 rc6，材料 2.0.0-alpha.9-3

看起来当页面加载时，它可以完美地与 rtl 或 ltr 一起使用。 但是，当它从应用程序内部动态更改时（请参阅 plunker），方向会发生变化，但生成的元素 md-sidenav-content 具有错误计算的 margin-right 和 margin-left。

进一步挖掘，我设法看到 _dir 对象有一个 eventEmitter，它应该监视 _dir 的更改事件并重新计算边距

@angular/material/sidenav/sidenav.js：

_dir.dirChange.subscribe(function () { return _this._validateDrawers(); });

但是在动态改变方向时它永远不会被调用。 虽然，_dir 在第一次加载页面时保持正确的值，无论是它的 ltr 还是 rtl。

最后，这是一个演示行为的 plunker：

http://plnkr.co/edit/o8lXWC?p=preview

我怀疑我没有正确使用 _dir，但没有设法找出正确的方法。

Answer 1

我不确定我对 angular1 所做的是否也适用于 angular 2。 那只是添加一个 CSS：

md-sidenav {
    left: initial;
    right: 0;
}
md-sidenav.md-closed {
    transform: translate3d(100%, 0, 0);
}

现在只为那些具有 rtl 方向的人提供它，向正文添加一个类/属性然后只选择它就足够了。

Answer 2

看看源代码Dir指令

@Input('dir') _dir: LayoutDirection = 'ltr';

• https://github.com/angular/material2/blob/2.0.0-alpha.9/src/lib/core/rtl/dir.ts#L19-L43

如您所见，您正在更改 _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
}

这是你的Plunker Example

如果您认为这是错误的决定，请检查此

• https://github.com/angular/material2/blob/2.0.0-alpha.9/src/demo-app/demo-app/demo-app.html#L42-L48

希望对您有所帮助！

Answer 3

我一直在尝试使用“end”和“start”对齐属性来解决问题，但我不知道为什么它不可能。 我认为一个可能的解决方案是你“玩”一下 NgStyle 和 margin-right，就​​像我在下面的 Plnkr 中展示的那样

[ngStyle]="{'margin-right': move}"

example

希望这可能有用。