Wie kann ich Fenstergröße sofort in Winkel 2 erkennen?

Question

Einige Funktionen in meiner Komponente ein- oder ausschalten hängen von der Browsergröße ab Daher möchte ich die Browserbreite auf resize-Ereignis überprüfen, aber ich könnte es mit der Init-Methode tun, aber ich muss den Browser aktualisieren, wenn Größe geändert wurde Browserbreite

aktualisieren

ngOnInit() { 
    if (window.innerWidth <= 767){ 
     ---- do something 
     } 
    } 

jedoch habe ich versucht, Methode zu verwenden OnChanges aber es funktioniert auch nicht

OnChanges(changes:SimpleChanges){ 
console.log('width:====>' + changes[window.innerWidth].currentValue); 
    if (changes[window.innerWidth].currentValue <= 767){ 
     ---- do something 
} 

}

ist es irgendwelche Vorschläge oder alternative Art und Weise dies zu erreichen?

Answer 1

Sie könnten nur Handler über window Objekt auf resize Ereignis setzen, aber dies ermöglicht es Ihnen, nur einzelne resize Veranstaltung zu setzen, neueste registrierte Ereignis auf onresize arbeiten.

constructor(private ngZone:NgZone) { 
    window.onresize = (e) => 
    { 
     //ngZone.run will help to run change detection 
     this.ngZone.run(() => { 
      console.log("Width: " + window.innerWidth); 
      console.log("Height: " + window.innerHeight); 
     }); 
    }; 
} 

Um es kantiger Weise Gebrauch @HostListener('window:resize') in Ihrer Komponente zu machen, die Ihre Resize-Funktion aufrufen können (auf dem HostListner Dekorateur Berg wurde) auf resize von Fenster.

@HostListener('window:resize', ['$event']) 
onResize(event){ 
    console.log("Width: " + event.target.innerWidth); 
} 

Answer 2

Ein einfacher Weg wäre die Resize-Methode auf dem HTML-Block, den Sie erfassen wollen werden:

<div class="some-class" (window:resize)="onResize($event)">...</div> 

Dann in Ihrer .ts Datei können Sie einfach hinzufügen:

onResize(event) { 

    const innerWidth = event.target.innerWidth; 
    console.log(innerWidth); 

    if (innerWidth <= 767) { 
     ...do something 
    } 
} 

Fügen Sie diese außerhalb der ngOnInit() {} hinzu, es sei denn, Sie wollten die Fenstergröße beim Laden der Seite.

Wenn Sie die Fenstergröße ändern, werden Sie die console.log

Answer 3

Verwenden HostListener sehen. Sie sollten das resize-Ereignis wahrscheinlich vor dem Ausführen von irgendetwas entprellen, es wird jedoch jedes Mal ausgelöst, wenn sich die Größe ändert, was in einigen Millisekunden dutzende oder hunderte Male sein kann, wenn der Benutzer die Fenstergröße verringert.

import { Component, HostListener } from '@angular/core'; 

@Component({...}) 
class TestComponent { 
    @HostListener('window:resize') 
    onWindowResize() { 
     //debounce resize, wait for resize to finish before doing stuff 
     if (this.resizeTimeout) { 
      clearTimeout(this.resizeTimeout); 
     } 
     this.resizeTimeout = setTimeout((() => { 
      console.log('Resize complete'); 
     }).bind(this), 500); 
    } 
}