Поиск ResizeObserver с Typescript в Angular 9

Question

Я пытаюсь реализовать ResizeObserver в приложении Angular:

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

... и у меня возникает ошибка TS:

TS2304: Cannot find name 'ResizeObserver'.

Я пытался обновить определение типа:

@types/resize-observer-browser

... однако проблема не устранена. Есть ли рекомендуемое решение или общий обходной путь, или было бы лучше использовать пакет NPM, такой как 'resize-наблюдающий', чтобы продолжать двигаться вперед?

Рад включить дополнительную информацию, если это необходимо.

Tks!

Answer 1

Я никогда не использовал ResizeObserver, однако я использую fromEvent из Rx JS с событием 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 2

У меня была такая же проблема, потому что я из пустого массива "types" в моем файле tsconfig. Решается добавлением «resize-наблюдателя-браузера» в массив типов:

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

Answer 3

Я предлагаю использовать resize-наблюдающий-polyfill , у него есть типы (в файле d.ts), и если браузер поддерживает Resize Observer, он просто использует собственную реализацию, но имеет большую поддержку, потому что использует Mutation Наблюдатель как запасной вариант, который имеет гораздо большую поддержку.

Браузер поддерживает сравнение:

• Resize Observer
• Mutation Observer

, как вы можете видеть, Mutation Observer работает даже в IE 11.