角度窗口调整大小事件

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

我只是想提出另一种方法。

您也可以在@Component()-decorator中添加主机绑定。您可以将事件和所需的函数调用放在主机元数据属性中，如下所示：

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

正确的方法是利用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();

    }

  }

}