Angular获取DOM元素

Angular可以通过@ViewChild装饰器来获得页面的DOM元素

    @ViewChild('fixedCard2')
    fixedCard2!: ElementRef;

这样可以获得页面上名为fixedCard2的组件，

<mat-card #fixedCard2>固定的card</mat-card>

但是这个只能获取组件，当我希望获取组件当前的位置的时候（因为我希望实现当页面向上滑动的时候，组件也向上滑动，最终固定在顶部的功能。类似于csdn首页右侧那一栏，一直往下滑会固定不动），但是获取的是组件，里面获取不到offsetTop属性也没有getBoundingClientRect()方法：

找了一圈才发现解决方案：Angular: nativeElement is undefined on ViewChild - Stack Overflow

说了这么一句：

If you want to get a reference of an element that hosts a component or directive you need to specify that you want the element instead of the component or directive

 我的理解是，如果要获取DOM，就要直接指明

于是就变成这样（就是加了一个read）：

    @ViewChild('fixedCard', { read: ElementRef})
    fixedCard!: ElementRef;

看看最后的打印结果

 扑面而来的是nativeElement，而这个，就是原生的DOM元素，里面就什么都有啦；

PS：

突然发现了不一样的地方：

通过offsetTop获取的是组件相对整个页面的距离，上下滚动时值是不变的，

而通过getBoundingClientRect().top获取的值是相对当前显示的页面的距离，如果逐渐上划而导致除了屏幕，那么这个值会是一个负值。