Angular2 nhận chiều rộng cửa sổ onResize

Question

Cố gắng tìm hiểu cách lấy chiều rộng cửa sổ về thay đổi kích thước sự kiện trong Angular2. Đây là mã của tôi:

export class SideNav { 

    innerWidth: number; 

    constructor(private window: Window){ 

     let getWindow = function(){ 
      return window.innerWidth; 
     }; 

     window.onresize = function() { 
      this.innerWidth = getWindow(); 
      console.log(getWindow()); 
     }; 
} 

Tôi đang nhập nhà cung cấp cửa sổ trên toàn cầu vào tệp bootstrap.ts bằng cách cung cấp quyền truy cập trên ứng dụng của tôi vào cửa sổ. Vấn đề tôi đang gặp là điều này cho tôi một kích thước cửa sổ, nhưng thay đổi kích thước cửa sổ - nó chỉ lặp lại cùng một kích thước hơn và hơn ngay cả khi cửa sổ thay đổi kích thước. Xem hình ảnh cho ví dụ về console.log: Screenshot image

Mục tiêu tổng thể của tôi là có thể đặt số cửa sổ thành biến để tôi có thể truy cập vào mẫu đó trong mẫu. Bất kỳ ý tưởng về những gì tôi đang làm sai ở đây?

Cảm ơn!

Answer 1

<div (window:resize)="onResize($event)" 

onResize(event) { 
    event.target.innerWidth; 
} 

để nhận được thông báo về sự kiện di chuyển trên một phần tử con trong một thành phần mẫu

hoặc nghe về các thành phần nguyên tố chủ bản thân

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

Answer 2

Trong trường hợp này bạn cần phải chạy phát hiện thay đổi theo cách thủ công. Khi bạn đang sửa đổi biến thành phần từ ngữ cảnh bên ngoài của Góc, về cơ bản, thay đổi kích thước sự kiện sẽ không bị khỉ vá bởi hệ thống phát hiện thay đổi Angular2.

Mã

import {ChangeDetectorRef} from 'angular2/core' 

export class SideNav { 
    innerWidth: number; 

    constructor(private window: Window, private cdr: ChangeDetectorRef){ 

     let getWindow =() => { 
      return window.innerWidth; 
     }; 

     window.onresize =() => { 
      this.innerWidth = getWindow(); 
      this.cdr.detectChanges(); //running change detection manually 
     }; 
    } 
} 

Thay Tôi muốn đề nghị bạn để đi cho this answer, trông sạch hơn

Answer 3

Sử dụng NgZone để kích hoạt sự thay đổi phát hiện:

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