我想执行一些基于窗口重新大小事件(在加载和动态)的任务。
目前我的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);
}
}
我如何从这个事件对象检索宽度和高度?
谢谢。
我写这个库是为了找到Angular中组件边界大小改变(重新调整大小)的方法,希望能帮助到其他人。你可以把它放在根组件上,会做和窗口大小调整一样的事情。
步骤1:导入模块
import { BoundSensorModule } from 'angular-bound-sensor';
@NgModule({
(...)
imports: [
BoundSensorModule,
],
})
export class AppModule { }
步骤2:添加如下指令
<简单的组件boundSensor > < /简单的组件>
步骤3:接收边界大小的详细信息
import { HostListener } from '@angular/core';
@Component({
selector: 'simple-component'
(...)
})
class SimpleComponent {
@HostListener('resize', ['$event'])
onResize(event) {
console.log(event.detail);
}
}
这是我创建的一个简单而干净的解决方案,这样我就可以将它注入到多个组件中。
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[] = [];
如果你想在调整大小完成后只发生一个事件,最好使用RxJS和debounceTime:
debounceTime:丢弃输出间隔时间少于指定时间的发出值。
在运行代码之前,他在两个事件之间等待> 0.5s。
简单地说,它在执行下一个代码之前等待大小调整完成。
// RxJS v6+
import { fromEvent } from 'rxjs';
import { debounceTime, map } from 'rxjs/operators';
...
const resize$ = fromEvent(window, 'resize');
resize$
.pipe(
map((i: any) => i),
debounceTime(500) // He waits > 0.5s between 2 events emitted before running the next.
)
.subscribe((event) => {
console.log('resize is finished');
});
堆栈闪电战
假设< 600px对你来说意味着移动,你可以使用这个可观察对象并订阅它:
首先,我们需要当前窗口大小。因此,我们创建了一个只发出一个值的可观察对象:当前窗口大小。
initial$ = Observable.of(window.innerWidth > 599 ? false : true);
然后我们需要创建另一个可观察对象,这样我们就知道窗口大小什么时候被改变了。为此,我们可以使用“fromEvent”操作符。要了解更多关于rxjs的操作符,请访问:rxjs
resize$ = Observable.fromEvent(window, 'resize').map((event: any) => {
return event.target.innerWidth > 599 ? false : true;
});
合并这两个流来接收我们的可观察对象:
mobile$ = Observable.merge(this.resize$, this.initial$).distinctUntilChanged();
现在你可以像这样订阅它:
mobile$.subscribe((event) => { console.log(event); });
记得取消订阅:)
下面是最新版本的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
};
};
这并不是问题的确切答案,但它可以帮助那些需要检测任何元素的大小变化的人。
我已经创建了一个库,可以将调整大小的事件添加到任何元素中——Angular Resize event。
它内部使用resizsensor从CSS元素查询。
示例使用
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;
}
}