Angular 9에서 유형 스크립트를 사용하여 관찰자 크기 조정 찾기

Angular 9에서 유형 스크립트를 사용하여 관찰자 크기 조정 찾기

Angular 앱에서 ResizeObserver를 구현하려고 합니다.

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

TS 오류가 발생했습니다.

TS2304: Cannot find name 'ResizeObserver'.

다음을 사용하여 유형 정의를 업데이트하려고 했습니다.

@types/resize-observer-browser

그러나 나의 문제는 계속됩니다.권장되는 솔루션이나 공통 해결 방법이 있습니까? 아니면 '크기 조정 관찰자'와 같은 NPM 패키지를 사용하여 계속 진행하는 것이 좋을까요?

필요한 경우 추가 정보를 제공합니다.

감사합니다!

size-observer-polyfill을 사용하는 것이 좋습니다(d.ts 파일). 브라우저가 Resize Observer를 지원하는 경우 기본 구현만 사용하지만 훨씬 더 큰 지원을 받는 폴백으로 Mutation Observer를 사용하기 때문에 더 큰 지원을 제공합니다.

사용하기만 하면 됩니다.

import ResizeObserver from 'resize-observer-polyfill';

비교할 수 있는 브라우저:

• 관찰자 크기 조정
• 돌연변이 관찰자

돌연변이 관찰자가 IE 11에서도 작동하는 것을 볼 수 있습니다.

tsconfig 파일에 있는 빈 "types" 배열 때문에 같은 문제가 있었습니다.유형 배열에 "resize-observer-browser"를 추가하면 해결됩니다.

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

이 노드 패키지 설치

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

Angular 10 프로젝트에서 이 문제를 해결했습니다.

설치하다@types/resize-observer-browserAngular 11에서 작동하지 않습니다.저는 결국 이렇게 되었습니다.

const observer = new (window as any).ResizeObserver...

설치하다npm i -D @types/resize-observer-browser

tsconfig에 추가"types": ["resize-observer-browser"]

추가하기만 하면 됩니다.@ts-ignore플래그. 이렇게 하면 Typescript가 다시 행복해집니다.

// @ts-ignore
const obs = new ResizeObserver(e => {
    // ...
});

저는 ResizeObserver를 사용해 본 적이 없지만 RxJS의 Event에서 크기 조정 이벤트를 사용하고 있으며 잘 작동합니다.여기 그것에 대한 코드가 있습니다.

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();
}

@saberprashant가 언급했듯이 특정 iOS 버전(13.3)에서만 발생한 것과 동일한 문제가 React에서 발생했습니다.import ResizeObserver from 'resize-observer-polyfill';IDE가 해당 가져오기를 권장하지 않더라도.

가져올 방법을 찾을 수 없습니다.@types/resize-observer-browser내 Angular 11 애플리케이션으로.해결 방법은 다음과 같습니다.declare:

    import { Component, ElementRef, OnInit, OnDestroy } from "@angular/core";
    
    declare var ResizeObserver;
    
    @Component({
      selector: "my-app"
    })
    export class AppComponent implements OnInit, OnDestroy {
      observer;
    
      constructor(private host: ElementRef) {}
    
      ngOnInit() {
        this.observer = new ResizeObserver(entries => {
           // handle resize 
        });
        this.observer.observe(this.host.nativeElement);
      }
    
      ngOnDestroy() {
        this.observer.unobserve(this.host.nativeElement);
      }
    }

유형 스크립트 문제에 대한 논의를 바탕으로 새로운 버전의 유형 스크립트를 통해 문제를 해결할 수 있습니다.

유형 스크립트 업그레이드가 통제 불가능한 경우(나처럼 3.6에서 3.8로 유형 스크립트 버전만 지원하는 Angular 9 응용 프로그램을 실행하고 있습니다).const observer = new (window as any).ResizeObserver(...)일시적으로 문제를 해결했습니다.

Nx 작업 공간의 lib에 대해 이 스레드에 제공된 답변으로 이 문제를 해결할 수 없습니다.

dep도 설치했습니다.@types/resize-observer-browser

그런 다음 Resize Observer를 사용할 때 다음을 파일 맨 위에 추가해야 했습니다.

/// <reference types="resize-observer-browser" />

정말 짜증나지만, 박자는new (window as any).ResizeObserver()적어도 내 생각에는.

Angular 11과 관련하여 이 문제에 직면했지만 제안된 솔루션 중 적합하다고 생각되는 것은 없습니다.

1. 다결방법과 같은 해결
   const observer = new (window as any).ResizeObserver
   또는
   declare var ResizeObserver;
   .

2. 
   import ResizeObserver from 'resize-observer-polyfill';
   선택사항이 .

형식 정의를 설치하는 도우미

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

그리고 그것들을 추가하는 것.

그러나 유형에 추가하는 것보다(도움이 되지 않음)
{"compilerOptions": { "types": ["resize-observer-browser"]}

정의 파일 자체를 추가했습니다.

"files": ["node_modules/@types/resize-observer-browser/index.d.ts"]

매력적으로 작동합니다.

아래와 같이 관찰자 크기 조정 사용

let observer = new (ResizeObserver as any)((entries) => {
      let currentWidth = entries[0].contentRect.width;
    });
    observer.observe(document.getElementById('someId'));
  }

나를 위해 일하는 것

추가하기import '@types/resize-observer-browser';나를 위해 그것을 고쳤습니다.

언급URL : https://stackoverflow.com/questions/60270925/finding-resizeobserver-with-typescript-in-angular-9