Typescript 如何订阅元素'；s（尚未存在）事件

我想创建一个可观察对象，它订阅一个元素上可能还不存在的事件。如果找不到该元素，它将重试，直到找到该元素为止

问题是TypeScript不喜欢它

在observable上调用

.pipe（…）

时出错。错误出现在我放在

管道中的任何东西上，在本例中是
retryWhen（…）
。如果不使用
管道
，则不会出现错误

这是我的密码：

import { Observable } from 'rxjs'
import { retryWhen, delay } from 'rxjs/operators'

export const scroll$ = new Observable((subscriber) => {
  const scrollbox = document.querySelector('.section-scrollbox')

  if (scrollbox) {
    scrollbox.addEventListener('scroll', handleEvent)

    return scrollbox.removeEventListener('scroll', handleEvent)
  } else {
    subscriber.error()
  }

  function handleEvent(this: HTMLDivElement) {
    subscriber.next(this)
  }
}).pipe(
  retryWhen((errors) => errors.pipe(delay(1000))),
)

我发现以下错误：

“MonoTypeOperatorFunction”类型的参数不能分配给“OperatorFunction”类型的参数

参数“源”和“源”的类型不兼容

类型“Observable”不可分配给类型“Observable”

类型“unknown”不可分配给类型“HtmlLevel”.ts（2345）

在这种情况下，如何将类型设置为
可观察

顺便说一句，这不是一个有角度的问题。我在一个Chrome扩展内容脚本中使用了它。
这个observable将完成以下工作：

const scroll$ = timer().pipe(
  switchMap(() => of(document.querySelector('.section-scrollbox'))),
  switchMap(bodyDiv => fromEvent(bodyDiv, 'scroll')),
  retryWhen(errors => errors.pipe(
    delay(1000)
  ))
);


说明：
-发出1个值，然后完成

这只是为了初始化可观察对象以查找您的元素

开关映射（（）=>of（document.querySelector（'.section scrollbox'））

将返回元素（如果存在）

开关映射（bodyDiv=>fromEvent（bodyDiv，'scroll'））

如果您的元素存在将从现在起仅返回滚动事件（不再查找该元素）

retryWhen（errors=>errors.pipe（延迟（1000）））

如果您的元素不存在将在
一秒钟的延迟

结帐

相同的工作…可能是不相关的，但组合
返回
和无效函数调用是一个坏主意，可能会混淆TS编译器，因此我建议将它们分开。是否要检查元素是否在1秒间隔内存在，如果存在，请订阅它的“滚动”事件？@benshabatnoam既然如此，interval+switchMap将是一个更好的解决方案…对于您的问题，它是10倍，让它工作起来很有趣。检查我的答案。