ค้นหาเว็บไซต์

javascript - การค้นหา ResizeObserver ด้วย Typescript ใน Angular 9


ฉันกำลังพยายามใช้งาน ResizeObserver ในแอป Angular:

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

... และพบกับข้อผิดพลาด TS:

TS2304: Cannot find name 'ResizeObserver'.

ฉันได้พยายามอัปเดตการกำหนดประเภทของฉันด้วย:

@types/resize-observer-browser

... อย่างไรก็ตาม ปัญหาของฉันยังคงอยู่ มีวิธีแก้ไขที่แนะนำหรือวิธีแก้ไขชั่วคราวที่ใช้กันทั่วไปหรือไม่ หรือจะดีกว่าถ้าใช้แพ็กเกจ NPM อย่าง 'resize-observer' เพื่อให้ดำเนินการต่อไปได้?

ยินดีที่จะให้ข้อมูลเพิ่มเติมถ้าจำเป็น

ขอบคุณ!

คำตอบ #1

การติดตั้งแพ็กเกจโหนดนี้

npm i -D @types/resize-observer-browser

แก้ไขปัญหาในโปรเจค Angular 10 แล้ว

คำตอบ #2

ฉันขอแนะนำให้ใช้ resize-observer-polyfill มันมีชนิดข้อมูล (ในไฟล์ d.ts) และถ้าเบราว์เซอร์สนับสนุน Resize Observer มันก็จะใช้การทำงานแบบเนทีฟ แต่มันมีการสนับสนุนที่มากกว่าเพราะมันใช้ Mutation Observer เป็นตัวสำรองซึ่งมีการสนับสนุนที่กว้างกว่า

ดังนั้นใช้เพียง:

import ResizeObserver from 'resize-observer-polyfill';

เบราว์เซอร์รองรับการเปรียบเทียบ:

  • ผู้สังเกตการปรับขนาด
  • ผู้สังเกตการกลายพันธุ์

ตามที่คุณเห็น Mutation Observer ยังทำงานได้ใน IE 11

คำตอบ #3

ฉันมีปัญหาเดียวกันเพราะอาร์เรย์ "types" ว่างในไฟล์ tsconfig ของฉัน แก้ปัญหาโดยการเพิ่ม "resize-observer-browser" ลงในอาร์เรย์ types:

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

บทความที่เกี่ยวข้อง