在 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”添加到 types 数组来解决：

{
  "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

只需添加@ts-ignore标志。 这将使 Typescript 再次高兴：

// @ts-ignore
const obs = new ResizeObserver(e => {
    // ...
});

Answer 7

我从来没有使用过 ResizeObserver，但是我确实使用了来自 RxJS 的 fromEvent 和 resize 事件，它工作正常。 这是它的代码。

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();
}

Answer 8

正如@saberprashant 所提到的，我在 React 中遇到了同样的问题，这只发生在特定的 iOs 版本（13.3）中，尝试使用import ResizeObserver from 'resize-observer-polyfill'; 即使您的 IDE 不推荐该导入。

Answer 9

我找不到将@types/resize-observer-browser导入我的 Angular 11 应用程序的方法。 我的解决方法是使用declare ：

    import { Component, ElementRef, OnInit, OnDestroy } from "@angular/core";
    
    declare var ResizeObserver;
    
    @Component({
      selector: "my-app"
    })
    export class AppComponent implements OnInit, OnDestroy {
      observer;
    
      constructor(private host: ElementRef) {}
    
      ngOnInit() {
        this.observer = new ResizeObserver(entries => {
           // handle resize 
        });
        this.observer.observe(this.host.nativeElement);
      }
    
      ngOnDestroy() {
        this.observer.unobserve(this.host.nativeElement);
      }
    }

Answer 10

基于typescript 问题讨论，较新版本的 typescript 可以解决该问题。

如果升级 typescript 超出您的控制范围（像我一样，我们正在运行一个 Angular 9 应用程序，它只支持从 3.6 到 3.8 的 typescript 版本） const observer = new (window as any).ResizeObserver(...)暂时解决了这个问题.

Answer 11

我无法使用此线程中为我的 Nx 工作区中的库提供的任何答案来解决此问题。

我还安装了 dep： @types/resize-observer-browser

然后在我使用 ResizeObserver 的地方，我必须将以下内容添加到我的文件顶部：

/// <reference types="resize-observer-browser" />

很烦人，但至少在我看来胜过new (window as any).ResizeObserver() 。

Answer 12

我在使用 Angular 11 时遇到过这个问题，建议的解决方案都不适合：

1. 任何解决方法，例如
   const observer = new (window as any).ResizeObserver
   或者
   declare var ResizeObserver;
   看起来像黑客而不是解决方案

2. 安装 polyfill
   import ResizeObserver from 'resize-observer-polyfill';
   不是一个选项，因为我想使用原生观察者而不是 polyfill

安装类型定义的助手是什么

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

并将它们添加到tsconfig.json

但不是添加到类型（这没有帮助）
{"compilerOptions": { "types": ["resize-observer-browser"]}

我已经添加了定义文件本身

"files": ["node_modules/@types/resize-observer-browser/index.d.ts"]

奇迹般有效

Answer 13

使用 ResizeObserver 如下

 let observer = new (ResizeObserver as any)((entries) => { let currentWidth = entries[0].contentRect.width; }); observer.observe(document.getElementById('someId')); }

为我工作

Answer 14

添加import '@types/resize-observer-browser'; 为我修好了