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

我正在尝试根据用户的语言选择动态更改布局，并即时从 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 http://plnkr.co/edit/o8lXWC?p=preview

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

看一下源代码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 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);
  }
}

所以我认为你的解决方案应该是这样的：

view

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

这是你的笨蛋的例子 http://plnkr.co/edit/qmOMzr?p=preview

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

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

希望对你有帮助！