Verwenden von Vorlage in eckigen 2 basierend auf Fenstergröße

Question

Auf meiner Vorlage habe ich 2 Divs. eine für die Tabellenansicht (Laptop) und eine für die Listenansicht (mobile Ansicht).

In meiner .ts-Datei möchte ich die Fenstergröße abrufen, damit ich anhand dieser Größe auswählen kann, welches div ich mit ngIf aufrufen möchte.

Im Konstruktor der .ts-Datei, die ich habe:

let windowSize: number; 
this.windowSize = innerWidth + innerHeight; 
window.addEventListener("resize", function() { 
    this.windowSize = innerWidth + innerHeight"; 
}); 

Aber wenn ich console.log() this.windowSize, ich nicht die Änderung bekommen, wenn die Fenstergröße verändert wird. Was vermisse ich?

Answer 1

dieses Problem gelöst durch NgZone verwenden. Eingespritzte NgZone in meinem Konstruktor und verwendete es als:

window.onresize = (e) => 
{ 
    this.ngZone.run(() => { 
    this.width = window.innerWidth; 
    this.height = window.innerHeight; 
    }); 
}; 

Auf diese Weise konnte ich für die Veränderung in meinen Komponenten in Fenstern überprüfen. Ich konnte keine Medienabfragen verwenden, da ich eine Funktion in meiner .ts-Datei basierend auf der Änderung der Fenstergröße ausführen musste.

Answer 2

Dies kann mit einfachen CSS eingestellt werden:

@media (min-width: 500px) and (max-width: 700px) { 
    .div1 { 
     display: none; 
    } 

@media (min-width: 701px) and (max-width: 900px) { 
    .div2 { 
     display: none; 
    }