Angular窗口resize事件

我想根据窗口重新大小事件（加载和dynamic）执行一些任务。

目前我有我的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

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

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

要么

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

支持的全球目标是window ， document和body 。

Answer 2

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

Answer 3

这是一个更好的方法来做到这一点。 基于Birowsky的回答。

第1步：使用RxJS Observables创buildangular 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并订阅任何您希望收到窗口大小调整事件的服务中创build的任何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 4

这样做的正确方法是利用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 5

假设<600px意味着移动给你，你可以使用这个可观察的和订阅它：

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

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

然后我们需要创build另一个可观察的，以便我们知道窗口大小何时改变。 为此，我们可以使用“fromEvent”运算符。 要了解有关rxjs运营商的更多信息，请访问： rxjs

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

将这两条stream合并，以接收我们可观察到的：

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

现在你可以这样订阅它：

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

记得取消订阅:)

Answer 6

在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 7

我写了这个lib来findAngular中的组件边界大小改变（resize），这可以帮助其他人。 你可以把它放在根组件上，就像窗口大小调整一样。

第1步：导入模块

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