Angular

Angular 4+ ngOnDestroy（）が稼働中-observableを破棄



Angular 4 Ngondestroy Service Destroy Observable



解決：

OnDestroyライフサイクルフックはプロバイダーで利用できます。ドキュメントによると：

ディレクティブ、パイプ、またはサービスが破棄されたときに呼び出されるライフサイクルフック。



次に例を示します。

@Injectable（）クラスサービスはOnDestroyを実装します{ngOnDestroy（）{console.log（ 'Service destroy'）}} @Component（{selector： 'foo'、template： `foo`、providers：[Service]}）export class Foo OnDestroyを実装します{コンストラクター（サービス：サービス）{} ngOnDestroy（）{console.log（ 'foo destroy'）}} @Component（{セレクター： 'my-app'、テンプレート： ``、}）export class App {isFoo = true;コンストラクター（）{setTimeout（（）=> {this.isFoo = false;}、1000）}}
上記のコードで注意してくださいサービスはに属するインスタンスですFooコンポーネントなので、次の場合に破棄できますフーは破壊されます。
 
 
 
ルートインジェクターに属するプロバイダーの場合、これはアプリケーションの破棄時に発生します。これは、複数のブートストラップによるメモリリークを回避するために、つまりテストで役立ちます。
 
親インジェクターのプロバイダーが子コンポーネントでサブスクライブされている場合、コンポーネントの破棄時に破棄されることはありません。これは、コンポーネントでサブスクライブを解除するコンポーネントの責任です。ngOnDestroy（別の回答が説明しているように）。
  
サービスに変数を作成します
 
 
 
サブスクリプション：サブスクリプション[] = [];
サブスクライブのそれぞれを次のように配列にプッシュします
 
this.subscriptions.push（...）
書くdispose（）メソッド
 
dispose（）{this.subscriptions.forEach（subscription => subset.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 / operator '; import {Subject} from'rxjs / Subject '; @Injectable（）エクスポートクラスMyServiceはOnDestroy {private onDestroy $ = new Subject（）;を実装します。コンストラクター（プライベートinjectedService：InjectedService）{//サービスにサブスクライブし、 `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`からいつ購読を解除する必要がありますか