角度窗口调整大小事件

Question

我想根据窗口调整大小事件（加载时和动态）执行一些任务。

目前我的 DOM 如下：

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

事件正确触发

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

如何从这个事件对象中获取宽度和高度？

谢谢。

Answer 1

在 Angular CDK 中有一个 ViewportRuler 服务。它在区域外运行，支持 orientationchange 和 resize。它也适用于服务器端渲染。

@Component({
  selector: 'my-app',
  template: `
    <p>Viewport size: {{ width }} x {{ height }}</p>
  `
})
export class AppComponent implements OnDestroy {
  width: number;
  height: number;
  private readonly viewportChange = this.viewportRuler
    .change(200)
    .subscribe(() => this.ngZone.run(() => this.setSize()));
  constructor(
    private readonly viewportRuler: ViewportRuler,
    private readonly ngZone: NgZone
  ) {
    // Change happens well, on change. The first load is not a change, so we init the values here. (You can use `startWith` operator too.)
    this.setSize();
  }
  // Never forget to unsubscribe!
  ngOnDestroy() {
    this.viewportChange.unsubscribe();
  }

  private setSize() {
    const { width, height } = this.viewportRuler.getViewportSize();
    this.width = width;
    this.height = height;
  }
}

Stackblitz example for ViewportRuler

好处是，它限制了更改检测周期（它只会在您在区域中运行回调时触发），而(window:resize) 将在每次调用时触发更改检测。

Answer 2

我采取的另一种方法是

import {Component, OnInit} from '@angular/core';
import {fromEvent} from "rxjs";
import {debounceTime, map, startWith} from "rxjs/operators";


function windowSizeObserver(dTime = 300) {
  return fromEvent(window, 'resize').pipe(
    debounceTime(dTime),
    map(event => {
      const window = event.target as Window;

      return {width: window.innerWidth, height: window.innerHeight}
    }),
    startWith({width: window.innerWidth, height: window.innerHeight})
  );
}

@Component({
  selector: 'app-root',
  template: `
    <h2>Window Size</h2>
    <div>
      <span>Height: {{(windowSize$ | async)?.height}}</span>
      <span>Width: {{(windowSize$ | async)?.width}}</span>
    </div>
  `
})
export class WindowSizeTestComponent {
  windowSize$ = windowSizeObserver();
}

这里的windowSizeObserver 可以在任何组件中重复使用

Answer 3

我的做法如下，很像 Johannes Hoppe 建议的：

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',
      event => this.onResize$.emit({
        width: event.target.innerWidth,
        height: event.target.innerHeight
      }));
  }
  
  getWindowSize(){
    this.onResize$.emit({
    width: window.innerWidth,
    height: window.innerHeight
    });
  }
}

在 app.component.ts 中：

Import { ResizeService } from ".shared/services/resize.service"
import { Component } from "@angular/core"

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent{
  windowSize: {width: number, height: number};
  
  constructor(private resizeService: ResizeService){
  }

  ngOnInit(){
    this.resizeService.onResize$.subscribe((value) => {
      this.windowSize = value;
    });
    
    this.resizeService.getWindowSize();
  }
}

然后在你的 app.component.html 中：

<router-outlet *ngIf = "windowSize?.width > 1280 && windowSize?.height > 700; else errorComponent">
</router-outlet>

<ng-template #errorComponent>
  <app-error-component></app-error-component>
</ng-template>

Answer 4

这是我创建的一个简单而干净的解决方案，因此我可以将它注入到多个组件中。

ResizeService.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ResizeService {

  constructor() {

    window.addEventListener('resize', (e) => {
      this.onResize.next();
    });

  }

  public onResize = new Subject();

}

使用中：

constructor(
  private resizeService: ResizeService
) { 

  this.subscriptions.push(this.resizeService.onResize.subscribe(() => {
    // Do stuff
  }));

}

private subscriptions: Subscription[] = [];

Answer 5

这是使用最新版本的 Rxjs 对上述@GiridharKamik 答案的更新。

import { Injectable } from '@angular/core';
import { Observable, BehaviorSubject, fromEvent } from 'rxjs';
import { pluck, distinctUntilChanged, map } from 'rxjs/operators';

@Injectable()
export class WindowService {
    height$: Observable<number>;
    constructor() {
        const windowSize$ = new BehaviorSubject(getWindowSize());

        this.height$ = windowSize$.pipe(pluck('height'), distinctUntilChanged());

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

}

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

Answer 6

我检查了大部分答案。然后决定查看 Layout 上的 Angular 文档。

Angular 有自己的 Observer 用于检测不同的大小，并且很容易实现到组件或服务中。

一个简单的例子是：

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

希望对你有帮助

Answer 7

所有解决方案都不适用于服务器端或角度通用

Answer 8

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

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

或使用HostListener decorator:

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

支持的全局目标是 window、document 和 body。

在 Angular 中实现 https://github.com/angular/angular/issues/13248 之前，强制订阅 DOM 事件并使用 RXJS 减少事件数量会更好，如其他一些答案所示。

Answer 9

我知道很久以前有人问过这个问题，但现在有更好的方法来做到这一点！我不确定是否有人会看到这个答案。显然你的进口：

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

然后在你的组件中：

resizeObservable$: Observable<Event>
resizeSubscription$: Subscription

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

那么一定要在销毁时取消订阅！

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

Answer 10

下面的代码让我们观察 Angular 中任何给定 div 的任何大小变化。

<div #observed-div>
</div>

然后在组件中：

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

Answer 11

我还没有看到有人谈论 MediaMatcher 或 angular/cdk。

您可以定义一个 MediaQuery 并将一个侦听器附加到它 - 然后如果匹配器匹配，您可以在模板（或 ts）上的任何位置调用东西。 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;
}

来源：https://material.angular.io/components/sidenav/overview

Answer 12

这不是问题的确切答案，但它可以帮助需要检测任何元素大小变化的人。

我创建了一个库，可以将resized 事件添加到任何元素 - Angular Resize Event。

它在内部使用来自CSS Element Queries 的ResizeSensor。

示例用法

HTML

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

打字稿

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

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

Answer 13

基于@cgatian 的解决方案，我建议进行以下简化：

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

用法：

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

Answer 14

这样做的正确方法是利用EventManager 类来绑定事件。这允许您的代码在其他平台上工作，例如使用 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);
  }
}

在组件中的使用很简单，只需将此服务作为提供程序添加到您的 app.module 中，然后将其导入组件的构造函数中。

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

Answer 15

我写了this lib 来查找 Angular 中的组件边界大小更改（调整大小），这可能对其他人有所帮助。你可以把它放在根组件上，和调整窗口大小一样。

第一步：导入模块

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

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

第 2 步：添加如下指令

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

第 3 步：接收边界尺寸详细信息

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

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

Answer 16

假设

首先我们需要当前的窗口大小。所以我们创建了一个 observable，它只发出一个值：当前窗口大小。

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

然后我们需要创建另一个 observable，以便我们知道窗口大小何时改变。为此，我们可以使用“fromEvent”运算符。想了解更多关于 rxjs 的操作符请访问：rxjs

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

合并这两个流以接收我们的 observable：

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

现在您可以像这样订阅它：

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

记得退订:)

Answer 17

在 Angular2 (2.1.0) 上，我使用 ngZone 来捕获屏幕更改事件。

看一下例子：

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

希望对你有所帮助！

Answer 18

这是一个更好的方法。基于Birowsky's 的回答。

第 1 步：使用 RxJS Observables 创建一个 angular service。

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

第 2 步：注入上述service 并订阅在服务中创建的任何Observables，只要您想接收窗口调整大小事件。

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

}

对反应式编程有充分的理解总是有助于克服困难的问题。希望这对某人有所帮助。

Answer 19

@Günter 的回答是正确的。我只是想提出另一种方法。

您还可以在@Component()-decorator 中添加主机绑定。您可以将事件和所需的函数调用放在 host-metadata-property 中，如下所示：

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