Angular 7/Typescript 中的交叉点观察器答案

【问题标题】：Intersection observer in Angular 7/TypescriptAngular 7/Typescript 中的交叉点观察器
【发布时间】：2019-06-04 13:55:29
【问题描述】：

我正在尝试关注有关 IntersectionObserver API 的各种教程，例如 this one。

将示例代码添加到我的组件的 TS 文件中：

const myImg = document.querySelector('.animate-me');

observer = new IntersectionObserver((entry, observer) => {
  console.log('entry:', entry);
  console.log('observer:', observer);
});

observer.observe(myImg);

给我一个错误：

错误 TS2300：重复标识符“观察者”。

此外，它抱怨 const myImg = document.querySelector('.animate-me');

类成员不能有 'const' 关键字.ts(1248)

我在这里错过了什么？

【问题讨论】：

重命名 args 可能

标签： angular typescript intersection-observer

【解决方案1】：

关于错误A class member cannot have the 'const' keyword.ts(1248)，您正在一个类中执行const myImg = ...。声明时不必有 const ，应该这样做 myImg = document.querySelector('.animate-me');

我认为错误error TS2300: Duplicate identifier 'observer'. 是因为您有一个名为observer 的属性，而IntersectionObserver 参数也称为observer。

以下代码应该可以工作：

myImg = document.querySelector('.animate-me');

observer = new IntersectionObserver((entry, obs) => {
  console.log('entry:', entry);
  console.log('observer:', obs);
});

observer.observe(myImg);

【讨论】：

你在 Angular 组件中吗？
是的。我也试过把它放在构造函数中。但后来我得到Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'
代码应该在视图初始化后执行，我实现了AfterViewInit并将代码放入实现中。这是一个工作组件，你可以试试这个：export class AppComponent implements AfterViewInit { private observer: IntersectionObserver; ngAfterViewInit() { const myImg = document.querySelector('.animate-me'); console.log(myImg); this.observer = new IntersectionObserver((entry, observer) => { console.log('entry:', entry); console.log('observer:', observer); }); this.observer.observe(myImg); } }
这是因为当页面加载时，您的元素相交出视口，而当您向下滚动时，它与视口相交。
看起来console.log('intersecting: ', entry[0].isIntersecting); 有效