Je voudrais effectuer certaines tâches en fonction de l'événement de redimensionnement de la fenêtre (à la charge et dynamiquement).

Actuellement, j'ai mon DOM comme suit:

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

L'événement se déclenche correctement

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

Comment récupérer la largeur et la hauteur de cet objet événement?

Merci.

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

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

ou en utilisant le décorateur HostListener :

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

Sont pris en charge des objectifs mondiaux window, documentet body.

Jusqu'à ce que https://github.com/angular/angular/issues/13248 soit implémenté dans Angular, il est préférable que les performances s'abonnent aux événements DOM impérativement et utilisent RXJS pour réduire la quantité d'événements comme indiqué dans certaines des autres réponses.

@ La réponse de Günter est correcte. Je voulais juste proposer une autre méthode.

Vous pouvez également ajouter la liaison hôte à l'intérieur du @Component()-décorateur. Vous pouvez placer l'événement et l'appel de fonction souhaité dans la propriété host-metadata-comme:

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

Je sais que cela a été demandé il y a longtemps, mais il existe une meilleure façon de le faire maintenant! Je ne sais pas si quelqu'un verra cette réponse. Évidemment vos importations:

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

Puis dans votre composant:

resizeObservable$: Observable<Event>
resizeSubscription$: Subscription

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

Assurez-vous ensuite de vous désinscrire sur destroy!

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

La bonne façon de procéder consiste à utiliser la classe EventManager pour lier l'événement. Cela permet à votre code de fonctionner sur d'autres plateformes, par exemple le rendu côté serveur avec 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);
  }
}

L'utilisation dans un composant est aussi simple que d'ajouter ce service en tant que fournisseur à votre app.module, puis de l'importer dans le constructeur d'un composant.

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

Voici une meilleure façon de procéder. Basé sur Birowsky réponse .

Étape 1: Créez un angular serviceavec 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
    };
};

Étape 2: Injectez ce qui précède serviceet abonnez-vous à l'un des éléments Observablescréés dans le service où que vous souhaitiez recevoir l'événement de redimensionnement de la fenêtre.

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

}

Une bonne compréhension de la programmation réactive aidera toujours à surmonter les problèmes difficiles. J'espère que cela aide quelqu'un.

Je n'ai vu personne parler MediaMatcherdeangular/cdk .

Vous pouvez définir une MediaQuery et y attacher un écouteur - puis n'importe où sur votre modèle (ou ts), vous pouvez invoquer des éléments si le Matcher correspond. 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

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

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

En supposant que <600px signifie mobile pour vous, vous pouvez utiliser cet observable et vous y abonner:

Nous avons d'abord besoin de la taille actuelle de la fenêtre. Nous créons donc un observable qui n'émet qu'une seule valeur: la taille actuelle de la fenêtre.

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

Ensuite, nous devons créer un autre observable, afin de savoir quand la taille de la fenêtre a été modifiée. Pour cela, nous pouvons utiliser l'opérateur "fromEvent". Pour en savoir plus sur les opérateurs de rxjs, veuillez visiter: rxjs

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

Fusionnez ces deux flux pour recevoir notre observable:

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

Vous pouvez maintenant vous y abonner comme ceci:

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

N'oubliez pas de vous désinscrire :)

Il existe un service ViewportRuler en CDK angulaire. Il s'exécute en dehors de la zone et fonctionne également avec le rendu côté serveur.

Sur la base de la solution de @cgatian, je suggère la simplification suivante:

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

Usage:

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

Ce n'est pas exactement la réponse à la question, mais cela peut aider quelqu'un qui a besoin de détecter des changements de taille sur n'importe quel élément.

J'ai créé une bibliothèque qui ajoute un resizedévénement à n'importe quel élément - Événement de redimensionnement angulaire .

Il utilise en interne à ResizeSensorpartir des requêtes d'éléments CSS .

Exemple d'utilisation

HTML

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

Manuscrit

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

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

J'ai écrit cette lib pour trouver une fois que la taille des limites des composants change (redimensionne) dans Angular, cela peut aider d'autres personnes. Vous pouvez le mettre sur le composant racine, fera la même chose que le redimensionnement de la fenêtre.

Étape 1: importez le module

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

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

Étape 2: ajoutez la directive comme ci-dessous

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

Étape 3: recevoir les détails de la taille des limites

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

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

Sur Angular2 (2.1.0), j'utilise ngZone pour capturer l'événement de changement d'écran.

Jetez un oeil sur l'exemple:

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

J'espère que cette aide!

Le code ci-dessous permet d'observer tout changement de taille pour un div donné en angulaire.

<div #observed-div>
</div>

puis dans le Composant:

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

toutes les solutions ne fonctionnent pas côté serveur ou en universel angulaire

J'ai vérifié la plupart de ces réponses. a ensuite décidé de consulter la documentation Angular sur la mise en page .

Angular a son propre Observer pour détecter différentes tailles et il est facile à implémenter dans le composant ou un service.

un exemple simple serait:

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

J'espère que ça aide