2

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

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

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

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

@角/材料/sidenav/sidenav.js：

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

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

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

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

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

4

3 回答 3

2

看看源代码Dir指令

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

如您所见，您正在更改_dir属性而不是dirsetter：

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 示例

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

希望对你有帮助！

于 2016-10-20T09:19:00.473 回答
0

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

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

例子

希望这可能有用。

于 2016-10-20T07:53:16.943 回答
0

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

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

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

于 2017-07-11T11:32:08.150 回答