web-dev-qa-db-fra.com

Recherche de ResizeObserver avec TypeScript dans Angular 9

J'essaye d'implémenter un ResizeObserver dans une application Angular:

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

... et je rencontre l'erreur TS:

TS2304: Cannot find name 'ResizeObserver'.

J'ai essayé de mettre à jour ma définition de type avec:

@types/resize-observer-browser

... mais mon problème persiste. Existe-t-il une solution souhaitable ou une solution de contournement commune, ou serait-il préférable d'utiliser un package NPM tel que 'resize-observer' pour continuer à avancer?

Heureux d'inclure plus d'informations si nécessaire.

Tks!

javascriptangulartypescriptobserver-pattern
4
jared jessup

Je n'ai jamais utilisé ResizeObserver, mais j'utilise fromEvent de RxJS avec l'événement resize et cela fonctionne bien. Voici le code pour cela.

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

J'ai eu le même problème parce que j'ai du tableau vide "types" dans mon fichier tsconfig. Résolu en ajoutant "resize-observer-browser" au tableau des types:

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

Je suggère d'utiliser resize-observer-polyfill il a des types (dans le fichier d.ts) et si le navigateur prend en charge Resize Observer, il utilise simplement une implémentation native, mais il a un support plus large, car il utilise Mutation Observer comme fallback qui ont un support beaucoup plus important.

Le navigateur prend en charge pour comparer:

comme vous pouvez le voir, Mutation Observer fonctionne même dans IE 11.

3
jcubic