각도 관찰 가능 - 구독이 없을 경우 구독을 취소해야 하는가?

각도 관찰 가능 - 구독이 없을 경우 구독을 취소해야 하는가?

나는 최신의 각 8을 사용하고 있고 관찰 가능성의 개념은 생소하다.내가 직접 관찰 가능한 사람에게 전화를 걸어 구독 변수에 적용하지 않는 경우, 여전히 구독을 취소할 필요가 있는지 묻는 질문.아래는 구독을 취소해야 하는지 알고 싶은 시나리오인가?미리 감사 드려요

시나리오 1 - 구성 요소에서 httpService 호출:

Service - httpService

     getContactsHttp(){
         let headers: any = new HttpHeaders(this.authService.getHeadersClient());
         return this.httpClient.get('/contacts', {headers: headers})
          .pipe(timeout(this.authService.getTimeoutLimit('normal')));
        }

Component - Calling getContactsHttp and sorting response

getContacts() {
 this.httpService.getContactsHttp().subscribe((data:any[])=>{
  this.records = this.sortData(data)
 })
}

시나리오 2 - 구성 요소에 포함된 관찰 가능한 내용에 대하여

contacts$: new Subject<any[]>;

ngOnInit() {
  this.getContacts();
  this.contacts$.subscribe((data:any[])=>{
    this.records = this.sortData(data);
  })
}

getContacts() {
    this.httpService.getContactsHttp().subscribe((data:ContactSearch[])=>{      
      this.contacts$.next(data);
    })
  }

서비스 - httpService

     getContactsHttp(){
         let headers: any = new HttpHeaders(this.authService.getHeadersClient());
         return this.httpClient.get('/contacts', {headers: headers})
          .pipe(timeout(this.authService.getTimeoutLimit('normal')));
        }

단답형, 예, 구독 누설을 방지하기 위해 여전히 컴포넌트에 있는 관찰 자료를 구독하지 않는 경우.내가 선호하는 방법 중 하나는 takePill() 연산자를 이용하는 것이다.

이것이 바로 당신이 그것을 당신의 구성 요소에서 사용할 수 있는 방법이다.

private unsubscribe: Subject<void> = new Subject();

ngOnDestroy() {
  this.unsubscribe.next();
  this.unsubscribe.complete();
}

getContacts() {
  this.httpService.getContactsHttp()
    .pipe(
      takeUntil(this.unsubscribe),
    ).subscribe((data:ContactSearch[])=>{      
      this.contacts$.next(data);
    });
 }

브라이언 러브의 설명대로

• 첫째, 우리는 과목 수업뿐만 아니라 takePill() 운영자를 수입한다.
• 다음으로, 우리는 구독 취소라는 개인 인스턴스(instance) 속성을 정의하는데, 그것은 제목이다.
• 우리는 또한 일반적 유형을 무효로 규정하는 새로운 주체 인스턴스를 만든다.구독()을 호출하기 전에 파이프() 방식으로 takePill() 연산자를 사용하여 구독 취소를 관찰할 수 있다.
• ngOnDestroy() 라이프사이클 방법에서는 다음() 알림을 내보낸 다음() 구독 취소를 완료할 수 있다.구독은 이제 완료되었으며, 구성 요소의 라이프사이클 동안 ngOnDestroy() 메서드가 호출되면 즉시 구독을 취소했다.

1) 일반적으로 http 전화를 직접 걸 때는 가입 취소를 하지 않아도 된다.부품이 파괴되더라도 파괴 후 청약 마감으로 인한 오버헤드는 미미하다.부품을 빨리 바꾸려면 여기에서 가입을 취소해야 할 겁니다.또한 등록을 취소하면 http 요청이 취소되므로, 그것이 필요하다면 등록을 취소하십시오.

추방을 취소하는 것은 아무런 해를 끼치지 않는다.확실하지 않으면 항상 구독을 취소하십시오.

2) 컴퍼멘트가 파기되었을 때 완료되지 않은 관찰 가능 상품에 가입할 경우 구독을 취소할 필요가 있다.그렇지 않으면 메모리(및 성능) 누수가 발생할 수 있다.관찰 가능한 자체에는 구독에 대한 참조가 있고 구독은 구성 요소에 대한 참조가 있기 때문에 구성 요소는 기억에서 지워지지 않으며 구독에 설명된 작업은 관찰 가능한 작업이 완료될 때까지 실행되며, 이 경우 구독은 절대 실행되지 않는다.그것은 너의 모든 구성품에 대해 일어날 것이다.

해결 방법

나는 두 가지 인기 있는 선택사항을 공유하겠다. 즉, 등록 취소의 부담을 단순화하는 것이다.@amanagg1204 대답으로 확장하면 모든 미래 구성요소를 확장할 수 있는 기본 구성요소를 만들 수 있다.그 안에 사용자 지정 연산자가 있을 수 있다.그것에는 한 가지 단점이 있다 - 당신은 항상 전화해야 한다.super.ngOnDestroy()사용할 필요가 있으면ngOnDestroy당신의 구성 요소 안에.

import { OnDestroy } from "@angular/core";
import { Subject, MonotypeOperatorFunction } from "rxjs";
import { takeUntil } from "rxjs/operators";

export abstract class UnsubscribeComponent implements OnDestroy {
  protected destroyed$: Subject<void> = new Subject();

  ngOnDestroy(): void {
    this.destroyed$.next();
    this.destroyed$.complete();
  }

  takeUntilDestroyed<T>(): MonoTypeOperatorFunction<T> {
      return takeUntil(this.destroyed$);
  }
}

export class Component extends UnsubscribeComponent {
   ngOnInit() {
      this.contacts$.pipe(
              this.takeUntilDestroyed(),
          ).subscribe((data:any[])=>{
          this.records = this.sortData(data);
      });
   }

  // WARNING - if you declare your ngOnDestroy in the component
  ngOnDestroy() {
     // DO NOT FORGET to call this
     super.ngOnDestroy();
     doYourStuff();
  }

}

다른 옵션(내가 선호하는)은 부모 추상 클래스를 갖는 것이 아니라(또한 그렇게 구현될 수 있지만), ()라는 유틸리티를 사용하는 것이다.npm i subsink --save)

import { SubSink } from 'subsink';

export class SampleComponent implements OnInit, OnDestroy {
  private subs = new SubSink();

  ngOnInit(): void {
    // Just put it into sink.
    this.subs.sink = this.contacts$.subscribe((data:any[])=>{
      this.records = this.sortData(data);
    });
    // call repeatedly
    this.subs.sink = this.otherService$.subscribe((data:any[])=>{
      this.things = this.sortData(data);
    });
  }

  ngOnDestroy(): void {
    // this will unsubscribe all
    this.subs.unsubscribe();
  }
}

응, 항상 구독을 취소해.등록을 취소하는 방법은 다음과 같다.

-용법takeUntil()

-더take(1)

-unsubscribe()에서ngOnDestroy()

사용async파이프를 치다

예, httpClient는 관찰할 수 있는 콜드를 반환하지만, 이 질문은 당신이 왜 여전히 관찰해야 하는지를 설명해 줄 겁니다.unsubscribe로 두 (최고득표 2차 답안을 살펴본다)

Http 메소드에 의해 만들어진 관찰대상으로부터 구독을 취소할 필요가 있는가?

https://blog.angularindepth.com/why-you-have-to-unsubscribe-from-observable-92502d5639d0

사이드 노트에서:

1) 서비스에 가입하지 말 것우리는 앵글 세계에 있고 우리는 반응적인 방식으로 생각할 필요가 있다. 서비스에 가입하는 것은 당신이 그것을 다른 것과 결합하기를 원하는 경우에 관찰할 수 있는 것을 사용하지 못하게 한다.

2) 관측기 사용 시 선언적 접근법을 사용한다.

3) 사용 중단any를 더 잘 수 것이다클래스와 인터페이스를 사용하여 코드를 더 쉽게 읽을 수 있도록 하십시오.

선언적 접근법의 이점: -RxJs 관측 가능성과 운영자의 힘 활용 -스트리밍을 효과적으로 결합 -관측 가능한 공유 -사용자 행동에 읽기 쉽게 반응

선언적 접근법이 어떻게 생겼는지 궁금하지 않으세요?

관측할 수 있는 방법을 가지고 있는 대신에, 여러분은 이렇게 할 것이다.

서비스TS

  yourObservableName$ = this.httpClient.get('/contacts', {headers: headers})
              .pipe(timeout(this.authService.getTimeoutLimit('normal')));

구성 요소.TS

this.httpService.yourObservableName$.subscribe(...)

많은 사람들이 이미 지적했듯이, http는 콜드 관찰 가능을 반환하지만 당신은 여전히 관찰 가능으로부터 구독을 취소해야 한다.매번 ngOnDestroy() 라이프사이클 훅을 수동으로 추가하지 않도록 더 나은 방법으로 스크리브레이션 관리 방법을 제안하겠다.우선 아래와 같이 가입 취소 구성요소를 만들겠다.

import { OnDestroy } from "@angular/core";
import { Subject } from "rxjs";

export abstract class UnsubscribeComponent implements OnDestroy {
  protected destroyed$: Subject<void> = new Subject();

  ngOnDestroy(): void {
    this.destroyed$.next();
    this.destroyed$.complete();
  }
}

그런 다음 모든 구성 요소 클래스 선언(필요한 경우)으로 확장하십시오.

export class ABC extends UnsubscribeComponent

생성자 내 호출 super

constructor(your dependencies) {
  super()
}

마지막으로 구독을 사용하여 다음과 같은 작업을 수행하십시오.

this.obs$.pipe(takeUntil(this.destroyed$)).subscribe(() => {
  // some logic here
})

또 다른 것은 takeWill이 파이프의 마지막 조작자여야 한다는 것이다.이게 너에게 도움이 되길 바라.

응, ngOnDestroy 라이프사이클 방식으로 모든 구독을 취소하는 것이 좋은 방법이야. 클래스 레벨 변수의 각 구독을 참조한 다음 수동으로 구독을 취소할 수 있어!

참조URL: https://stackoverflow.com/questions/58460256/angular-observables-do-i-need-unsubscribe-if-no-subscription