Angular 4+ ngOnDestroy() 서비스 중 - 파괴 가능

Angular 4+ ngOnDestroy() 서비스 중 - 파괴 가능

각도 적용에서 우리는ngOnDestroy()구성 요소/지시에 대한 수명 주기 후크를 사용하여 관찰 가능한 항목의 구독을 취소합니다.

다음에서 생성된 관찰 가능한 항목을 삭제/소멸합니다.@injectable()서비스.저는 어떤 게시물들을 보았습니다.ngOnDestroy()서비스에서도 사용할 수 있습니다.

하지만, 그것이 좋은 관행이고 그렇게 하는 유일한 방법이며 언제쯤 전화가 올 것인가요? 누군가 분명히 말해주세요.

OnDestroy 라이프사이클 후크는 공급자에서 사용할 수 있습니다.문서에 따르면:

지시, 파이프 또는 서비스가 파괴될 때 호출되는 라이프사이클 후크입니다.

다음은 예입니다.

@Injectable()
class Service implements OnDestroy {
  ngOnDestroy() {
    console.log('Service destroy')
  }
}

@Component({
  selector: 'foo',
  template: `foo`,
  providers: [Service]
})
export class Foo implements OnDestroy {
  constructor(service: Service) {}

  ngOnDestroy() {
    console.log('foo destroy')
  }
}

@Component({
  selector: 'my-app',
  template: `<foo *ngIf="isFoo"></foo>`,
})
export class App {
  isFoo = true;

  constructor() {
    setTimeout(() => {
        this.isFoo = false;
    }, 1000)
  }
}

위의 코드에서 주의하십시오.Service에 속하는 인스턴스입니다.Foo구성 요소, 그래서 그것은 파괴될 수 있습니다.Foo파괴되었습니다.

루트 인젝터에 속한 공급자의 경우 애플리케이션 파괴 시 이 현상이 발생합니다. 이는 테스트 등에서 여러 부트스트랩을 사용하여 메모리 누수를 방지하는 데 도움이 됩니다.

상위 인젝터의 제공자가 하위 구성 요소에 가입되어 있는 경우 구성 요소 파괴 시 해당 공급자가 삭제되지 않습니다. 이는 구성 요소에서 가입을 취소해야 하는 구성 요소의 책임입니다.ngOnDestroy(다른 대답이 설명하듯이).

서비스에 변수를 만듭니다.

subscriptions: Subscriptions[]=[];

각 구독을 다음과 같이 배열에 밀어넣습니다.

this.subscriptions.push(...)

쓰기 adispose()방법

dispose(){
this.subscriptions.forEach(subscription =>subscription.unsubscribe())

ngOnDestroy 중에 구성 요소에서 이 메서드를 호출합니다.

ngOnDestroy(){
   this.service.dispose();
 }

나는 이것을 선호합니다.takeUntil(onDestroy$)pipable 연산자에 의해 활성화된 패턴입니다.저는 이 패턴이 더 간결하고, 더 깨끗하고, 그리고 그것이 실행되면 구독을 없애겠다는 의도를 명확하게 전달한다는 것을 좋아합니다.OnDestroy라이프 사이클 훅

이 패턴은 삽입된 관찰 가능한 항목에 가입하는 구성 요소뿐만 아니라 서비스에도 적용됩니다.아래의 스켈레톤 코드는 패턴을 자체 서비스에 통합할 수 있는 충분한 세부 정보를 제공합니다.다음과 같은 서비스를 가져온다고 가정해 보십시오.InjectedService...

import { InjectedService } from 'where/it/lives';
import { Injectable, OnDestroy } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class MyService implements OnDestroy {

  private onDestroy$ = new Subject<boolean>();

  constructor(
    private injectedService: InjectedService
  ) {
    // Subscribe to service, and automatically unsubscribe upon `ngOnDestroy`
    this.injectedService.observableThing().pipe(
      takeUntil(this.onDestroy$)
    ).subscribe(latestTask => {
      if (latestTask) {
        this.initializeDraftAllocations();
      }
    });
  }

  ngOnDestroy() {
    this.onDestroy$.next(true);
    this.onDestroy$.complete();
  }

구독 취소 시기/방법에 대한 주제는 여기에서 광범위하게 다루어집니다: Angular/RxJs "Subscription"에서 언제 구독을 취소해야 합니까?

분명히 말씀드리자면, 당신은 파괴할 필요가 없습니다.Observables구독만 가능합니다.

다른 사람들이 당신이 이제 사용할 수 있다고 지적한 것 같습니다.ngOnDestroy서비스도 제공합니다.링크: https://angular.io/api/core/OnDestroy

토큰을 사용하는 경우 주의

애플리케이션을 최대한 모듈화하기 위해 종종 공급자 토큰을 사용하여 구성 요소에 서비스를 제공합니다.이것들은 그들의 것을 얻지 못하는 것 같습니다.ngOnDestroy메소드:-()라고 .

예를 들면

export const PAYMENTPANEL_SERVICE = new InjectionToken<PaymentPanelService>('PAYMENTPANEL_SERVICE');

구성 요소에 공급자 섹션이 있는 경우:

 {
     provide: PAYMENTPANEL_SERVICE,
     useExisting: ShopPaymentPanelService
 }

나의ShopPaymentPanelService.ngOnDestroy구성 요소가 삭제될 때 메서드가 호출됩니다.나는 방금 이것을 어려운 방법으로 알아냈습니다!

은 해결 ▁in▁다▁the▁a니▁to입▁conj것▁with▁provide와 함께 서비스를 제공하는 것입니다.useExisting.

[
   ShopPaymentPanelService,

   {
       provide: PAYMENTPANEL_SERVICE,
       useExisting: ShopPaymentPanelService
   }
]

때 제가이했때을걸때▁when을.ngOnDispose예상대로 호출되었습니다.

이것이 버그인지 아닌지 확실하지 않지만 매우 예상치 못했습니다.

서비스에 변수를 만듭니다.

private subscriptions$ = new Subscription();

각 구독을 생성자(또는 ngOnInit 라이프사이클 후크)에서 관찰 가능한 항목에 추가합니다.

ngOnInit() {
  this.subscriptions.add(...)
  this.subscriptions.add(...)
}

모든 구독 및 하위 구독에서 구독을 취소하려면 파괴 시 구성 요소에서 이 메서드를 호출합니다.

ngOnDestroy(){
   this.subsriptions$.unsubscribe();
}

.pipe(take(1).subscribe()를 사용하는 것이 좋습니다.진행 중인 헤드라인 등록 설정을 방지합니다.

언급URL : https://stackoverflow.com/questions/45898948/angular-4-ngondestroy-in-service-destroy-observable