Evento di ridimensionamento della finestra angular

Vorrei eseguire alcune attività in base all’evento di ridimensionamento della finestra (su carico e dynamicmente).

Attualmente ho il mio DOM come segue:

L’evento si triggers correttamente

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

Come posso recuperare la larghezza e l’altezza da questo object evento?

Grazie.

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

o

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

I target globali supportati sono window , document e body .

@ La risposta di Günter è corretta. Volevo solo proporre un altro metodo.

È anche ansible aggiungere l’associazione host all’interno del @Component() . Puoi inserire l’evento e la chiamata della funzione desiderata nella proprietà host-metadata in questo modo:

 @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 } } 

Il modo corretto per farlo è utilizzare la class EventManager per associare l’evento. Ciò consente al tuo codice di funzionare su piattaforms alternative, ad esempio il rendering lato server con 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 { return this.resizeSubject.asObservable(); } private resizeSubject: Subject; constructor(private eventManager: EventManager) { this.resizeSubject = new Subject(); this.eventManager.addGlobalEventListener('window', 'resize', this.onResize.bind(this)); } private onResize(event: UIEvent) { this.resizeSubject.next(event.target); } } 

L’utilizzo in un componente è semplice come aggiungere questo servizio come fornitore al tuo app.module e quindi importarlo nel costruttore di un componente.

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

Ecco un modo migliore per farlo. Basato sulla risposta di Birowsky .

Passaggio 1: creare un angular service con RxJS Observables .

 import { Injectable } from '@angular/core'; import { Observable, BehaviorSubject } from 'rxjs'; @Injectable() export class WindowService { height$: Observable; //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).distinctUntilChanged(); Observable.fromEvent(window, 'resize') .map(getWindowSize) .subscribe(windowSize$); } } function getWindowSize() { return { height: window.innerHeight //you can sense other parameters here }; }; 

Passaggio 2: Inietta il service sopra e abbonati a qualsiasi Observables creato all’interno del servizio ovunque desideri ricevere l’evento di ridimensionamento della finestra.

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

Una buona conoscenza della programmazione retriggers aiuterà sempre a superare problemi difficili. Spero che questo aiuti qualcuno.

Supponendo che <600px significa mobile per te, puoi usare questo osservabile e iscriverti ad esso:

Per prima cosa abbiamo bisogno delle dimensioni attuali della finestra. Quindi creiamo un osservabile che emette solo un singolo valore: la dimensione corrente della finestra.

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

Quindi dobbiamo creare un altro osservabile, in modo da sapere quando è stata cambiata la dimensione della finestra. Per questo possiamo usare l’operatore “fromEvent”. Per ulteriori informazioni sugli operatori di rxjs, visitare: rxjs

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

Merg questi due flussi per ricevere il nostro osservabile:

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

Ora puoi iscriverti in questo modo:

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

Ricordati di annullare l’iscrizione 🙂

Non ho visto nessuno parlare di angular/cdk .

Puoi definire un MediaQuery e attaccare un listener ad esso, quindi ovunque sul tuo modello (o ts) puoi invocare materiale se il Matcher è abbinato. LiveExample

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

 
I turn red on mobile mode

App.Component.css

 .text-red { color: red; } .text-blue { color: blue; } 

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

Sulla base della soluzione di @cgatian suggerirei la seguente semplificazione:

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

Uso:

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

Su Angular2 (2.1.0) utilizzo ngZone per catturare l’evento di cambio schermo.

Dai un’occhiata all’esempio:

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

Spero che questo aiuto!

Questa non è esattamente la risposta alla domanda, ma può aiutare qualcuno che ha bisogno di rilevare cambiamenti di dimensione su qualsiasi elemento.

Ho creato una libreria che aggiunge eventi resized a qualsiasi elemento: Angular Resize Event .

Utilizza internamente ResizeSensor da CSS Element Queries .

Esempio di utilizzo

HTML

 

Dattiloscritto

 @Component({...}) class MyComponent { width: number; height: number; onResized(event: ResizedEvent): void { this.width = event.newWidth; this.height = event.newHeight; } } 

So che questo è stato chiesto molto tempo fa, ma ora c’è un modo migliore per farlo! Non sono sicuro se qualcuno vedrà questa risposta. Ovviamente le tue importazioni:

 import { fromEvent } from "rxjs/observable/fromEvent"; import { Observable } from "rxjs/Observable"; import { Subscription } from "rxjs/Subscription"; 

Quindi nel tuo componente:

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

Quindi assicurati di annullare l’iscrizione a distruggere!

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

Ho scritto questa lib per trovare una volta la modifica della dimensione del contorno dei componenti (ridimensiona) in Angolare, questo può aiutare altre persone. Puoi metterlo sul componente root, farà la stessa cosa del ridimensionamento della finestra.

Passaggio 1: importa il modulo

 import { BoundSensorModule } from 'angular-bound-sensor'; @NgModule({ (...) imports: [ BoundSensorModule, ], }) export class AppModule { } 

Passaggio 2: aggiungi la direttiva come di seguito

Passaggio 3: ricevere i dettagli delle dimensioni limite

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