Browserbreite in der Komponente prüfen, in Variable speichern und dann in der Vorlage in Angular verwenden

Question

Ich versuche zu sagen, ob ein sidénav geöffnet werden soll oder nicht, basierend auf der Eigenschaft deviceWidth, die von der Komponente kommt. Aus irgendeinem Grund funktioniert es nicht. Hier

ist die html:

<md-sidenav #sidenav mode="side" opened="deviceWidth > 960"> 

Hier ist, was meine Komponente wie folgt aussieht:

export class AppComponent { 
    deviceWidth: any; 
    ngOnInit() { 
    this.deviceWidth = window.innerWidth; 
    } 
} 

Answer 1

falscher Weg (nicht genau falsch, aber nicht im eigentlichen Sinne),

[opened]="{{deviceWidth>960}}" 

Korrekter Weg,

[opened]="(deviceWidth>960)" 

Und vielleicht resize Funktion von window würde auch (später) erforderlich sein, wie gezeigt,

@HostListener('window:resize', ['$event']) 
    onResize(event: any) { 
    console.log(event.target.innerWidth); 
    this.deviceWidth = event.target.innerWidth; 
    } 

Answer 2

wenn opened als @Input in Ihrer md-sidenav Komponente deklariert wird dann Ihre Syntax ist falsch. Es hat

<md-sidenav #sidenav mode="side" [opened]="deviceWidth > 960"> 

Check diese Links, um weitere Informationen

https://toddmotto.com/passing-data-angular-2-components-input https://angular.io/docs/ts/latest/cookbook/component-communication.html