Angular CDK Scrolling 之 ViewportRuler（源码阅读）

VIP文章江小虫儿

已于 2022-06-19 23:58:03 修改

阅读量236

点赞数

分类专栏： Angular 文章标签：前端 angular

于 2022-06-19 23:34:56 首次发布

本文链接：https://blog.csdn.net/kate_sicheng/article/details/125364257

版权

文章目录

一、源码
二、核心

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<