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获取的值是相对当前显示的页面的距离,如果逐渐上划而导致除了屏幕,那么这个值会是一个负值。