文章目录
ViewportRuler 是一种可注入的服务,用于衡量浏览器视口的范围。
一、源码
// 默认情况下限制调整大小事件的时间(单位为ms)。
export const DEFAULT_RESIZE_TIME = 20;
export interface ViewportScrollPosition {
top: number;
left: number;
}
/**
* 获取浏览器视口边界的服务。
* @docs-private
*/
@Injectable({
providedIn: 'root'})
export class ViewportRuler implements OnDestroy {
// 缓存浏览器视口大小
private _viewportSize: {
width: number; height: number} | null;
// 视口改变的事件流
private readonly _change = new Subject<Event>();
// 事件监听器,用于处理视口更改事件
private _changeListener = (event: Event) => {
this._change.next(event);
};
// 用于引用正确的文档/窗口
protected _document: Document;
constructor(
private _platform: Platform,
ngZone: NgZone,
@Optional() @Inject(DOCUMENT) document: any,
) {
this._document = document;
ngZone.runOutsideAngular(() => {
if (_platform.isBrowser) {
const window = this._getWindow();
// 我们自己绑定事件,而不是通过诸如 RxJS 的 `fromEvent` 之类的东西,这样我们就可以确保它们被绑定在 NgZone 之外。
window.addEventListener('resize', this._changeListener);
window.addEventListener('orientationchange', this._changeListener);
}
// 清除缓存的位置,以便下次需要时重新测量视口。 我们不需要跟踪订阅,因为它是在销毁时完成的。
this.change().subscribe(() => (this._viewportSize =