J'essaye d'implémenter un ResizeObserver dans une application angulaire:
@types/resize-observer-browser
... et je rencontre l'erreur TS:
TS2304: Cannot find name 'ResizeObserver'.
J'ai essayé de mettre à jour ma définition de type avec:
const obs = new ResizeObserver(e => {
// ...
});
... 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!
6 Réponses :
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();
}
Merci pour cette réponse! J'avais essayé cela à l'origine, mais l'événement de redimensionnement n'a pas détecté les changements de propriété clientWidth. Je ne suis pas sûr qu'il existe un événement JS pour détecter les modifications des propriétés DOM?
Merci! J'ai le ResizeObserver qui fait le travail maintenant. Désolé, vous ne voyez pas mon vote positif ... Je n'ai qu'une seule répétition, donc il ne montrera pas encore la mienne haha.
Salut @JuanDelaCruz! Avant que certaines des suggestions ci-dessous soient publiées, j'ai utilisé 'resize-observer' de NPM import {ResizeObserver} from 'resize-observer'; puis dans le code: import {ResizeObserver} from 'resize-observer'; `` `` // Observe this.myObserver = new ResizeObserver (entries => {// Faites quelque chose}); this.myObserver.observe (this.parent); `` Désolé pour le format des commentaires à ce sujet ... laissez-moi savoir si vous avez besoin de plus d'informations!
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"],
}
}
cela ne fonctionne pas pour moi. Je me suis littéralement cogné la tête pendant environ 2 heures juste pour que ça marche. Cependant, selon les versions actuelles, importez simplement ResizeObserver dans vos travaux de composants, import ResizeObserver from 'resize-observer-polyfill';
@saberprashant c'est exactement ma réponse, mais sans le code que vous devez utiliser, car il est évident comment utiliser la bibliothèque javascript dans TypeScript. Ajouté tout à l'heure.
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 solution de secours qui a un support beaucoup plus grand.
Alors utilisez simplement:
import ResizeObserver from 'resize-observer-polyfill';
Le navigateur prend en charge pour comparer:
comme vous pouvez le voir, Mutation Observer fonctionne même dans IE 11.
tellement vrai. Désormais, resize-observer-polyfill prend entièrement en charge TS et fonctionne bien avec Angular, pour Chrome, Safari, Mozilla et même IE.
Ajoutez simplement l'indicateur @ts-ignore . Cela rendra Typescript heureux à nouveau:
// @ts-ignore
const obs = new ResizeObserver(e => {
// ...
});
J'ai eu le même problème dans React qui ne m'est arrivé que dans une version iOs spécifique (13.3), comme @saberprashant l'a mentionné, essayez de l'importer avec import ResizeObserver from 'resize-observer-polyfill'; même si votre IDE ne recommande pas cette importation.
Ajout de l' import '@types/resize-observer-browser'; réparé pour moi