Angular2-Material sideNav - rtl/ltr-Richtung dynamisch ändern

Question

Ich versuche, mein Layout dynamisch entsprechend der Sprachauswahl der Benutzer zu ändern und fliege von LTR zu RTL.

Ich verwende Angular 2 rc6, Material 2.0.0-alpha.9-3

Es sieht aus wie wenn die Seite geladen wird, funktioniert es perfekt mit entweder rtl oder ltr. Wenn es sich jedoch dynamisch innerhalb der App ändert (siehe Plunker), ändert sich die Richtung, aber das generierte Element md-sidenav-content hat einen falsch berechneten Rand rechts und links.

Graben weiter, konnte ich sehen, dass das _DIR Objekt eine eventEmitter hat, die auf Änderungsereignisse von _DIR beobachten sollte und neu berechnen die Margen

@ Winkel/Material/sidenav/sidenav.js:

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

Aber es wird nie aufgerufen, wenn die Richtung dynamisch geändert wird. Obwohl _dir den richtigen Wert enthält, wenn die Seite das erste Mal geladen wird, egal ob ltr oder rtl.

Schließlich ist hier ein Plunker das Verhalten zu zeigen:

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

Ich vermute, ich bin nicht richtig mit _DIR aber nicht gelungen, herauszufinden, was der richtige Weg ist, es zu tun.

Answer 1

Werfen Sie einen Blick auf Quellcode Dir Richtlinie

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

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

Wie Sie Sie ändern _dir Eigenschaft statt dir Setter sehen:

set dir(v: LayoutDirection) { 
    let old = this._dir; 
    this._dir = v; 
    if (old != this._dir) { 
    this.dirChange.emit(null); 
    } 
} 

So dass es Hink Ihre Lösung sollte wie:

Ansicht

<md-sidenav-layout fullscreen dir="ltr" #root="$implicit"> 

<select #langSelect (change)="changeLang(langSelect.value, root)"> 

Komponente

changeLang(lang, root: Dir) { 
    this.translate.use(lang); 
    root.dir = lang == "fr" ? "rtl" : "ltr"; 
} 

Auf diese Weise können direction: string Eigentum auf Ihrer Komponente weglassen.

Und noch eine Anmerkung:

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 
} 

Hier ist Ihr Plunker Example

Wenn Sie denken, dass dies die falsche Entscheidung dann überprüfen Sie diese

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

Hoffe, das wird dir helfen!

Answer 2

Ich habe versucht, die "Ende" und "Start" Align-Attribut verwenden, um das Problem zu lösen, aber ich weiß nicht, warum es nicht möglich ist. denke ich, eine mögliche Lösung ist, dass Sie mit dem ngstyle ein wenig „spielen“ und den margin-right, wie ich in der folgenden Plnkr

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

example

Hoffnung zeigen, dies nützlich sein könnte.

Answer 3

Ich bin nicht sicher, ob das, was ich mit angular1 tat auch mit Winkel 2. das funktioniert, ist nur das Hinzufügen einer CSS:

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

jetzt ist es zu haben, nur für diejenigen mit rtl-Richtung, eine Klasse Hinzufügen/Attribut an den Körper und dann nur das Auswählen, wäre ausreichend.