Question

我试图根据用户动态更改布局＆＃39;语言选择并即时从LTR切换到RTL。

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

看起来加载页面时，它与rtl或ltr完美配合。但是，当它在应用程序中动态更改时（请参阅plunker），方向会发生变化，但生成的元素md-sidenav-content的边距偏差和边距偏差。

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

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

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

但是在动态改变方向时从未调用过。虽然，_dir在第一次加载页面时保持正确的值，无论是ltr还是rtl。

最后，这是一个展示这种行为的傻瓜：

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

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

Answer 1

查看源代码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 2

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

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

example

希望这可能有用。

Answer 3

我不确定我对angular1做了什么也适用于角度2。那只是添加一个CSS：

    <form action="{% url 'parts:part_search_view'%}" role="form" class="navbar-form navbar-left" method="get" >
    {% csrf_token %}
    <div class="form-group ">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" name="search_text">
        <button class="form-control search_buton btn btn-success " type="submit" >Search</button>
    </div>
    </form>

现在只有那些具有rtl方向的人，将一个类/属性添加到主体然后只选择它就足够了。

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

3 个答案: