可以使用Intersection Observer
来判断DOM元素是否在视口内。下面是一个使用Angular 2的代码示例:
@angular/cdk
包。可以通过运行以下命令来安装它:npm install @angular/cdk
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { IntersectiionObserver } from '@angular/cdk/observers';
@ViewChild
装饰器获取要检测的DOM元素的引用:@Component({
selector: 'app-example',
template: `
`
})
export class ExampleComponent implements OnInit {
@ViewChild('elementToCheck', { static: true }) elementToCheck: ElementRef;
ngOnInit() {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log('Element is in viewport');
} else {
console.log('Element is not in viewport');
}
});
});
observer.observe(this.elementToCheck.nativeElement);
}
}
在上述代码中,我们通过@ViewChild
装饰器获取了代表要检测的DOM元素的引用。然后,我们创建了一个IntersectionObserver
实例,并使用observe
方法来开始观察DOM元素。每当DOM元素进入或离开视口时,IntersectionObserver
会触发回调函数,在回调函数中我们判断entry.isIntersecting
属性来确定DOM元素是否在视口内。
这就是使用Angular 2进行视口检测的解决方法。