làm thế nào tôi có thể phát hiện thay đổi kích thước cửa sổ ngay lập tức trong góc 2?

Question

một số tính năng trong thành phần của tôi bật hoặc tắt tùy thuộc vào kích thước trình duyệt do đó tôi muốn kiểm tra chiều rộng của trình duyệt về thay đổi kích thước sự kiện, tuy nhiên tôi có thể thực hiện bằng phương pháp On Init nhưng tôi cần làm mới trình duyệt khi thay đổi kích thước xảy ra để cập nhật chiều rộng của trình duyệt

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

tuy nhiên tôi đã cố gắng để sử dụng phương pháp OnChanges nhưng nó không hoạt động hoặc

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

}

là có bất cứ đề nghị hoặc cách khác để thực hiện điều này?

Answer 1

Bạn chỉ có thể đặt handler trên resize sự kiện trên window đối tượng, nhưng điều này sẽ cho phép bạn đặt chỉ đơn kiện resize, sự kiện đăng ký mới nhất về onresize sẽ làm việc.

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); 
     }); 
    }; 
} 

Để làm cho nó góc cạnh hơn cách sử dụng @HostListener('window:resize') bên trong thành phần của bạn, mà sẽ cho phép để gọi chức năng thay đổi kích thước của bạn (mà trên đó HostListner trang trí đã được mount) vào resize của cửa sổ.

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

Answer 2

Một cách dễ dàng hơn sẽ được sử dụng phương pháp thay đổi kích thước trên khối html mà bạn muốn để phát hiện:

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

Sau đó, trong tập tin .ts của bạn, bạn có thể chỉ cần thêm:

onResize(event) { 

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

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

Thêm này bên ngoài của ngOnInit() {} trừ khi bạn muốn kích thước cửa sổ khi tải trang.

Khi bạn thay đổi kích thước cửa sổ của bạn, bạn sẽ thấy console.log

Answer 3

Sử dụng HostListener. Bạn có lẽ nên debounce sự kiện thay đổi kích thước mặc dù trước khi làm bất cứ điều gì, nó sẽ kích hoạt mọi thay đổi kích thước mà có thể là hàng chục hoặc hàng trăm lần trong một vài phần nghìn giây khi người dùng kéo kích thước cửa sổ.

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); 
    } 
}