Saya ingin melakukan beberapa tugas berdasarkan peristiwa ukuran kembali jendela (saat memuat dan secara dinamis).

Saat ini saya memiliki DOM saya sebagai berikut:

<div id="Harbour">
    <div id="Port" (window:resize)="onResize($event)" >
        <router-outlet></router-outlet>
    </div>
</div>

Acara dengan benar menyala

export class AppComponent {
   onResize(event) {
        console.log(event);
    }
}

Bagaimana cara mengambil Lebar dan Tinggi dari objek acara ini?

Terima kasih.

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

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

atau menggunakan dekorator HostListener :

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

Didukung target global window, documentdan body.

Sampai https://github.com/angular/angular/issues/13248 diimplementasikan di Angular, kinerja lebih baik untuk berlangganan acara DOM secara imperatif dan menggunakan RXJS untuk mengurangi jumlah acara seperti yang ditunjukkan dalam beberapa jawaban lain.

@ Günter jawabannya benar. Saya hanya ingin mengusulkan metode lain.

Anda juga bisa menambahkan host-binding di dalam @Component()-decorator. Anda dapat menempatkan acara dan panggilan fungsi yang diinginkan di properti host-metadata seperti:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  host: {
    '(window:resize)': 'onResize($event)'
  }
})
export class AppComponent{
   onResize(event){
     event.target.innerWidth; // window width
   }
}

Saya tahu ini sudah lama ditanyakan, tetapi ada cara yang lebih baik untuk melakukan ini sekarang! Saya tidak yakin apakah ada yang akan melihat jawaban ini. Jelas impor Anda:

import { fromEvent, Observable, Subscription } from "rxjs";

Kemudian di komponen Anda:

resizeObservable$: Observable<Event>
resizeSubscription$: Subscription

ngOnInit() {
    this.resizeObservable$ = fromEvent(window, 'resize')
    this.resizeSubscription$ = this.resizeObservable$.subscribe( evt => {
      console.log('event: ', evt)
    })
}

Maka pastikan untuk berhenti berlangganan saat menghancurkan!

ngOnDestroy() {
    this.resizeSubscription$.unsubscribe()
}

Cara yang benar untuk melakukan ini adalah dengan memanfaatkan kelas EventManager untuk mengikat acara. Ini memungkinkan kode Anda berfungsi di platform alternatif, misalnya rendering sisi server dengan Angular Universal.

import { EventManager } from '@angular/platform-browser';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { Injectable } from '@angular/core';

@Injectable()
export class ResizeService {

  get onResize$(): Observable<Window> {
    return this.resizeSubject.asObservable();
  }

  private resizeSubject: Subject<Window>;

  constructor(private eventManager: EventManager) {
    this.resizeSubject = new Subject();
    this.eventManager.addGlobalEventListener('window', 'resize', this.onResize.bind(this));
  }

  private onResize(event: UIEvent) {
    this.resizeSubject.next(<Window>event.target);
  }
}

Penggunaan dalam suatu komponen sesederhana menambahkan layanan ini sebagai penyedia ke app.module Anda dan kemudian mengimpornya dalam konstruktor komponen.

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

@Component({
  selector: 'my-component',
  template: ``,
  styles: [``]
})
export class MyComponent implements OnInit {

  private resizeSubscription: Subscription;

  constructor(private resizeService: ResizeService) { }

  ngOnInit() {
    this.resizeSubscription = this.resizeService.onResize$
      .subscribe(size => console.log(size));
  }

  ngOnDestroy() {
    if (this.resizeSubscription) {
      this.resizeSubscription.unsubscribe();
    }
  }
}

Ini cara yang lebih baik untuk melakukannya. Berdasarkan jawaban Birowsky .

Langkah 1: Buat angular servicedengan RxJS Observables .

import { Injectable } from '@angular/core';
import { Observable, BehaviorSubject } from 'rxjs';

@Injectable()
export class WindowService {
    height$: Observable<number>;
    //create more Observables as and when needed for various properties
    hello: string = "Hello";
    constructor() {
        let windowSize$ = new BehaviorSubject(getWindowSize());

        this.height$ = (windowSize$.pluck('height') as Observable<number>).distinctUntilChanged();

        Observable.fromEvent(window, 'resize')
            .map(getWindowSize)
            .subscribe(windowSize$);
    }

}

function getWindowSize() {
    return {
        height: window.innerHeight
        //you can sense other parameters here
    };
};

Langkah 2: Suntikkan hal di atas servicedan berlangganan ke salah satu yang Observablesdibuat dalam layanan di mana pun Anda ingin menerima acara mengubah ukuran jendela.

import { Component } from '@angular/core';
//import service
import { WindowService } from '../Services/window.service';

@Component({
    selector: 'pm-app',
    templateUrl: './componentTemplates/app.component.html',
    providers: [WindowService]
})
export class AppComponent { 

    constructor(private windowService: WindowService) {

        //subscribe to the window resize event
        windowService.height$.subscribe((value:any) => {
            //Do whatever you want with the value.
            //You can also subscribe to other observables of the service
        });
    }

}

Pemahaman yang baik tentang Pemrograman Reaktif akan selalu membantu dalam mengatasi masalah yang sulit. Semoga ini bisa membantu seseorang.

Saya tidak melihat orang berbicara tentang MediaMatcherdari angular/cdk.

Anda dapat mendefinisikan MediaQuery dan melampirkan pendengar ke dalamnya - lalu di mana pun di templat Anda (atau ts), Anda dapat meminta hal-hal jika Pencocokan cocok. Contoh Langsung

App.Component.ts

import {Component, ChangeDetectorRef} from '@angular/core';
import {MediaMatcher} from '@angular/cdk/layout';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  mobileQuery: MediaQueryList;

  constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) {
    this.mobileQuery = media.matchMedia('(max-width: 600px)');
    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
    this.mobileQuery.addListener(this._mobileQueryListener);
  }

  private _mobileQueryListener: () => void;

  ngOnDestroy() {
    this.mobileQuery.removeListener(this._mobileQueryListener);
  }

}

App.Component.Html

<div [class]="mobileQuery.matches ? 'text-red' : 'text-blue'"> I turn red on mobile mode 
</div>

App.Component.css

.text-red { 
   color: red;
}

.text-blue {
   color: blue;
}

sumber: https://material.angular.io/components/sidenav/overview

Dengan asumsi bahwa <600px berarti ponsel untuk Anda, Anda dapat menggunakan ini yang dapat diamati dan berlangganan:

Pertama kita perlu ukuran jendela saat ini. Jadi kami membuat diamati yang hanya memancarkan nilai tunggal: ukuran jendela saat ini.

initial$ = Observable.of(window.innerWidth > 599 ? false : true);

Maka kita perlu membuat yang lain yang bisa diamati, sehingga kita tahu kapan ukuran jendela diubah. Untuk ini, kita dapat menggunakan operator "fromEvent". Untuk mempelajari lebih lanjut tentang operator rxjs, silakan kunjungi: rxjs

resize$ = Observable.fromEvent(window, 'resize').map((event: any) => {
  return event.target.innerWidth > 599 ? false : true;
 });

Gabungkan kedua aliran ini untuk menerima pengamatan kami:

mobile$ = Observable.merge(this.resize$, this.initial$).distinctUntilChanged();

Sekarang Anda dapat berlangganan seperti ini:

mobile$.subscribe((event) => { console.log(event); });

Ingatlah untuk berhenti berlangganan :)

Ada layanan ViewportRuler di CDK sudut. Ini berjalan di luar zona, dan bekerja dengan rendering sisi server juga.

Berdasarkan solusi dari @cgatian saya akan menyarankan penyederhanaan berikut:

import { EventManager } from '@angular/platform-browser';
import { Injectable, EventEmitter } from '@angular/core';

@Injectable()
export class ResizeService {

  public onResize$ = new EventEmitter<{ width: number; height: number; }>();

  constructor(eventManager: EventManager) {
    eventManager.addGlobalEventListener('window', 'resize',
      e => this.onResize$.emit({
        width: e.target.innerWidth,
        height: e.target.innerHeight
      }));
  }
}

Pemakaian:

import { Component } from '@angular/core';
import { ResizeService } from './resize-service';

@Component({
  selector: 'my-component',
  template: `{{ rs.onResize$ | async | json }}`
})
export class MyComponent {
  constructor(private rs: ResizeService) { }
}

Ini bukan jawaban yang tepat untuk pertanyaan tersebut tetapi dapat membantu seseorang yang perlu mendeteksi perubahan ukuran pada elemen apa pun.

Saya telah membuat perpustakaan yang menambahkan resizedacara ke elemen apa pun - Angular Resize Event .

Ini digunakan secara internal ResizeSensordari Query Elemen CSS .

Contoh penggunaan

HTML

<div (resized)="onResized($event)"></div>

TypeScript

@Component({...})
class MyComponent {
  width: number;
  height: number;

  onResized(event: ResizedEvent): void {
    this.width = event.newWidth;
    this.height = event.newHeight;
  }
}

Saya menulis lib ini untuk menemukan perubahan ukuran batas komponen sekali (ukuran) di Angular, semoga ini membantu orang lain. Anda dapat meletakkannya di komponen root, akan melakukan hal yang sama seperti mengubah ukuran jendela.

Langkah 1: Impor modul

import { BoundSensorModule } from 'angular-bound-sensor';

@NgModule({
  (...)
  imports: [
    BoundSensorModule,
  ],
})
export class AppModule { }

Langkah 2: Tambahkan arahan seperti di bawah ini

<simple-component boundSensor></simple-component>

Langkah 3: Menerima detail ukuran batas

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

@Component({
  selector: 'simple-component'
  (...)
})
class SimpleComponent {
  @HostListener('resize', ['$event'])
  onResize(event) {
    console.log(event.detail);
  }
}

Pada Angular2 (2.1.0) saya menggunakan ngZone untuk menangkap acara perubahan layar.

Lihatlah contohnya:

import { Component, NgZone } from '@angular/core';//import ngZone library
...
//capture screen changed inside constructor
constructor(private ngZone: NgZone) {
    window.onresize = (e) =>
    {
        ngZone.run(() => {
            console.log(window.innerWidth);
            console.log(window.innerHeight);
        });
    };
}

Semoga bantuan ini!

Kode di bawah ini memungkinkan mengamati perubahan ukuran untuk div yang diberikan di Angular

<div #observed-div>
</div>

kemudian di Komponen:

oldWidth = 0;
oldHeight = 0;

@ViewChild('observed-div') myDiv: ElementRef;
ngAfterViewChecked() {
  const newWidth = this.myDiv.nativeElement.offsetWidth;
  const newHeight = this.myDiv.nativeElement.offsetHeight;
  if (this.oldWidth !== newWidth || this.oldHeight !== newHeight)
    console.log('resized!');

  this.oldWidth = newWidth;
  this.oldHeight = newHeight;
}

semua solusi tidak bekerja dengan sisi-server atau universal angular

Saya memeriksa sebagian besar jawaban ini. kemudian memutuskan untuk memeriksa dokumentasi Angular tentang Tata Letak .

Angular memiliki Pengamat sendiri untuk mendeteksi ukuran yang berbeda dan mudah diterapkan ke dalam komponen atau Layanan.

contoh sederhana adalah:

import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';

@Component({...})
class MyComponent {
  constructor(breakpointObserver: BreakpointObserver) {
    breakpointObserver.observe([
      Breakpoints.HandsetLandscape,
      Breakpoints.HandsetPortrait
    ]).subscribe(result => {
      if (result.matches) {
        this.activateHandsetLayout();
      }
    });
  }
}

semoga membantu