Javascript 在Angular 9中使用Typescript查找ResizeObserver

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

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

。。。并且我遇到了TS错误：

TS2304: Cannot find name 'ResizeObserver'.

我已尝试使用以下内容更新我的类型定义：

@types/resize-observer-browser

。。。然而，我的问题依然存在。是否有一个可取的解决方案或通用的解决方法，或者使用NPM包（如“调整观察者的大小”）继续前进会更好

如果需要，欢迎提供更多信息

---

Tks

我从未使用过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();
}

从“rxjs”导入{fromEvent，Observable，Subscription}；
resizeObservable$：可观察；
resizeSubscription$：订阅；
恩戈尼尼特（）{
this.resizeObservable$=fromEvent（元素“resize”）
this.resizeSubscription$=this.resizeObservable$.subscripte（evt=>{
//你想干什么就干什么
})
}
恩贡德斯特罗（）{
此.resizeSubscription$.unsubscripte（）；
}

我也遇到了同样的问题，因为我的tsconfig文件中没有空的“types”数组。 通过将“调整观察者浏览器的大小”添加到类型数组中解决：

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

我建议使用它有类型（在d.ts文件中），如果浏览器支持Resize Observer，它只使用本机实现，但它有更大的支持，因为它使用变异观察者作为后备，支持更大

所以只要使用：

从“resize observer polyfill”导入ResizeObserver；

浏览器支持比较：

---

正如您所看到的，突变观察者甚至可以在IE 11中工作。

只需添加

@ts ignore

标志。这将使Typescript再次感到高兴：

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

---

正如@saberprashant提到的，我在React中遇到了同样的问题，这只发生在特定的iOs版本（13.3）中，尝试从“resize observer polyfill”中使用

import ResizeObserver导入它即使您的IDE不建议导入。
添加
导入“@types/resize observer browser”为我修复了它安装此节点包

npm i-D@types/resize observer浏览器

解决了Angular 10项目中的问题。
安装
@types/resize observer browser
无法在Angular 11上工作。最后我做了这样的事：

const observer=new（窗口如有）。ResizeObserver。。。
我找不到将
@types/resize observer浏览器导入Angular 11应用程序的方法。我的解决方法是使用
声明
：

从“@angular/core”导入{Component，ElementRef，OnInit，OnDestroy}；
声明var ResizeObserver；
@组成部分({
选择器：“我的应用程序”
})
导出类AppComponent实现OnInit、OnDestroy{
观察者
构造函数（私有主机：ElementRef）{}
恩戈尼尼特（）{
this.observer=新的ResizeObserver（条目=>{
//手柄调整大小
});
this.observer.observe（this.host.nativeElement）；
}
恩贡德斯特罗（）{
this.observer.unobserver（this.host.nativeElement）；
}
}
安装
npm i-D@types/resize observer浏览器

添加到tsconfig
“类型”：[“调整观察者浏览器的大小”]
对于Nx工作区中的库，我无法使用此线程中提供的任何答案解决此问题

我还安装了dep:
@types/resizeobserver浏览器

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

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

//

非常烦人，但比新的（窗口）要好。至少在我看来，ResizeObserver（）
。
感谢您的回复！我最初确实尝试过这个，但是resize事件没有检测到clientWidth属性的更改。我不确定是否存在用于检测DOM属性更改的JS事件？谢谢！我现在让一个大尺寸的观察员来做这项工作。对不起，你没有看到我的投票。。。我只有1个代表，所以它还不会显示我的，哈哈。嘿@JuanDelaCruz！在发布下面的一些建议之前，我从NPM
import{ResizeObserver}使用了ResizeObserver然后在代码中：
从'ResizeObserver'导入{ResizeObserver}``//Observe this.myObserver=new resizeobserve（条目=>{//Do something}）；this.myObserver.observe（this.parent）；`对此的评论格式感到抱歉。。。让我知道你是否需要更多信息！这不行！真的。现在，
resizeobserver polyfill
完全支持TS，并且可以与Angular、Chrome、Safari、Mozilla甚至IE配合使用。这对我来说不起作用。我真的撞了我的头两个小时，只是为了让它工作。不过，根据当前版本，只需在组件中导入
ResizeObserver
，即可从“ResizeObserver polyfill”导入ResizeObserver
@saberprashant这正是我的答案，但没有您需要使用的代码，因为很明显如何在TypeScript中使用javascript库。刚刚加的。对我有用，谢谢！我在一个Vue3项目中遇到了这个问题。这就成功了。感谢您提供的这段代码片段，它可能会提供一些有限的、即时的帮助。一个恰当的解释将通过说明为什么这是一个很好的问题解决方案而大大提高它的长期价值，并将使它对未来有其他类似问题的读者更有用。请编辑您的答案以添加一些解释，包括您所做的假设。Angular告诉我，即使类型文件位于正确的位置，它也无法解析类型文件。我还必须将此代码段
“类型”：[“调整观察者浏览器的大小”]
添加到我的TSConfig文件中，以使此解决方案起作用（或将此类型添加到数组（如果已存在）