我想根据窗口大小调整事件（加载和动态）执行一些任务。
目前我的 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);
}
}
如何从此事件对象中检索宽度和高度？
谢谢。
<div (window:resize)="onResize($event)"
onResize(event) {
event.target.innerWidth;
}
或使用HostListener 装饰器：
@HostListener('window:resize', ['$event'])
onResize(event) {
event.target.innerWidth;
}
支持的全球目标是window，document和body。
在 Angular 中实现https://github.com/angular/angular/issues/13248之前，强制订阅 DOM 事件并使用 RXJS 来减少事件数量会更好地提高性能，如其他一些答案所示。
我知道很久以前就有人问过这个问题，但现在有更好的方法来做到这一点！我不确定是否有人会看到这个答案。显然你的进口：
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()
}
@Günter 的回答是正确的。我只是想提出另一种方法。
您还可以在@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
}
}
正确的做法是利用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();
}
}
}
这是一个更好的方法。基于比罗斯基的回答。
第 1 步：angular service使用 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
};
};
第 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
});
}
}
对react式编程的充分理解总是有助于克服困难的问题。希望这可以帮助某人。