web-dev-qa-db-ja.com

Angular 9でTypeScriptを使用してResizeObserverを見つける

AngularアプリにResizeObserverを実装しようとしています：

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

...そしてTSエラーに遭遇しました：

TS2304: Cannot find name 'ResizeObserver'.

タイプ定義を次のように更新しようとしました：

@types/resize-observer-browser

...しかし、私の問題は解決しません。推奨される解決策や一般的な回避策はありますか、または「resize-observer」などのNPMパッケージを使用して先に進む方が良いでしょうか？

必要に応じて、詳細をお知らせください。

Tks！

javascriptangulartypescriptobserver-pattern
4
jared jessup

私はResizeObserverを使用したことがありませんが、RsizeJSの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();
}
2
Natixco

私のtsconfigファイルに空の「types」配列があるため、同じ問題が発生しました。タイプ配列に「resize-observer-browser」を追加することで解決します。

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

私は resize-observer-polyfill を使用することをお勧めします（d.tsファイルに）タイプがあり、ブラウザーがResize Observerをサポートしている場合はネイティブ実装を使用しますが、Mutation Observerを使用するため、より大きなサポートがありますはるかに大きなサポートがあるフォールバック。

ブラウザは比較をサポートします：

あなたがIE 11。

3
jcubic