在 Angular 9 中使用 Typescript 查找 ResizeObserver

Question

我正在尝试在 Angular 应用程序中实现 ResizeObserver：

const obs = new ResizeObserver(e => {
      // ...
});

...并且遇到了 TS 错误：

TS2304: Cannot find name 'ResizeObserver'.

我试图用以下方法更新我的类型定义：

@types/resize-observer-browser

......但是我的问题仍然存在。是否有建议的解决方案或常见的解决方法，或者使用像“resize-observer”这样的 NPM 包来继续前进会更好吗？

如果需要，很高兴包含更多信息。

太棒了！

Answer 1

我遇到了同样的问题，因为我的 tsconfig 文件中有空的“类型”数组。通过将“resize-observer-browser”添加到类型数组来解决：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "typeRoots": ["node_modules/@types"],
    "types": ["resize-observer-browser"],
  }
}

Answer 2

我建议使用resize-observer- polyfill 它有类型（在 d.ts 文件中），如果浏览器支持 Resize Observer 它只使用本机实现，但它有更大的支持，因为它使用 Mutation Observer 作为后备，具有更大的支持.

所以只需使用：

import ResizeObserver from 'resize-observer-polyfill';

浏览器支持比较：

• 调整观察者大小
• 突变观察者

正如你所看到的，Mutation Observer 甚至可以在 IE 11 中工作。

Answer 3

安装这个节点包

npm i -D @types/resize-observer-browser

解决了 Angular 10 项目中的问题。

Answer 4

安装@types/resize-observer-browser不适用于 Angular 11。我最终这样做：

const observer = new (window as any).ResizeObserver...

Answer 5

安装 npm i -D @types/resize-observer-browser

添加到 tsconfig "types": ["resize-observer-browser"]

Answer 6

我从未使用过 ResizeObserver，但是我确实将 RxJS 中的 fromEvent 与调整大小事件一起使用，并且工作正常。这是它的代码。

import { fromEvent, Observable, Subscription } from "rxjs";

resizeObservable$: Observable<Event>;
resizeSubscription$: Subscription;

ngOnInit() {
  this.resizeObservable$ = fromEvent(element, 'resize')
  this.resizeSubscription$ = this.resizeObservable$.subscribe(evt => {
     // do whatever you waant
  })
}

ngOnDestroy() {
  this.resizeSubscription$.unsubscribe();
}