Angular での購読解除に関する簡単な説明-jsチュートリアル-php.cn

Angular での購読解除に関する簡単な説明

小云云

リリース： 2018-01-16 09:02:49

オリジナル

1411 人が閲覧しました

この記事では主に、Angular でサブスクリプションをキャンセルするタイミングについての簡単な議論を紹介します。編集者はそれが非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

Observable オブジェクトをサブスクライブするとき、またはイベントリスナーをセットアップするとき、ある時点でサブスクリプション解除操作を実行してオペレーティングシステムのメモリを解放する必要があることはご存知かもしれません。そうしないと、アプリケーションでメモリリークが発生する可能性があります。

ngOnDestroy ライフサイクルフックでサブスクリプション解除操作を手動で実行する必要がある一般的なシナリオをいくつか見てみましょう。

手動リリースリソースシナリオ

Form

export class TestComponent {

 ngOnInit() {
  this.form = new FormGroup({...});
  // 监听表单值的变化
  this.valueChanges = this.form.valueChanges.subscribe(console.log);
  // 监听表单状态的变化              
  this.statusChanges = this.form.statusChanges.subscribe(console.log);
 }

 ngOnDestroy() {
  this.valueChanges.unsubscribe();
  this.statusChanges.unsubscribe();
 }
}

ログイン後にコピー

上記の解決策は、他のフォームコントロールにも適用できます。

ルーティング

export class TestComponent {
 constructor(private route: ActivatedRoute, private router: Router) { }

 ngOnInit() {
  this.route.params.subscribe(console.log);
  this.route.queryParams.subscribe(console.log);
  this.route.fragment.subscribe(console.log);
  this.route.data.subscribe(console.log);
  this.route.url.subscribe(console.log);
  
  this.router.events.subscribe(console.log);
 }

 ngOnDestroy() {
  // 手动执行取消订阅的操作
 }
}

ログイン後にコピー

レンダラーサービス

export class TestComponent {
 constructor(
  private renderer: Renderer2, 
  private element : ElementRef) { }

 ngOnInit() {
  this.click = this.renderer
    .listen(this.element.nativeElement, "click", handler);
 }

 ngOnDestroy() {
  this.click.unsubscribe();
 }
}

ログイン後にコピー

無限のObservables

Interval() または fromEvent() 演算子を使用すると、無限の Observable オブジェクトが作成されます。この場合、それらを使用する必要がなくなったら、リソースを手動で購読解除して解放する必要があります。

export class TestComponent {
 constructor(private element : ElementRef) { }

 interval: Subscription;
 click: Subscription;

 ngOnInit() {
  this.interval = Observable.interval(1000).subscribe(console.log);
  this.click = Observable.fromEvent(this.element.nativeElement, 'click')
              .subscribe(console.log);
 }

 ngOnDestroy() {
  this.interval.unsubscribe();
  this.click.unsubscribe();
 }
}

ログイン後にコピー

Redux Store

export class TestComponent {

 constructor(private store: Store) { }

 todos: Subscription;

 ngOnInit() {
   /**
   * select(key : string) {
   *  return this.map(state => state[key]).distinctUntilChanged();
   * }
   */
   this.todos = this.store.select('todos').subscribe(console.log); 
 }

 ngOnDestroy() {
  this.todos.unsubscribe();
 }
}

ログイン後にコピー

リソースシナリオを手動で解放する必要はありません

AsyncPipe

@Component({
 selector: 'test',
 template: ``
})
export class TestComponent {
 constructor(private store: Store) { }
 
 ngOnInit() {
   this.todos$ = this.store.select('todos');
 }
}

ログイン後にコピー

非同期パイプラインはサブスクリプション解除操作を自動的に実行し、その後メモリリークのリスクを回避します。

Angular AsyncPipe ソースコードスニペット

@Pipe({name: 'async', pure: false})
export class AsyncPipe implements OnDestroy, PipeTransform {
 // ...
 constructor(private _ref: ChangeDetectorRef) {}

 ngOnDestroy(): void {
  if (this._subscription) {
   this._dispose();
  }
 }
}

ログイン後にコピー

@HostListener

export class TestDirective {
 @HostListener('click')
 onClick() {
  ....
 }
}

ログイン後にコピー

@HostListener デコレータを使用する場合、イベントリスナーを追加するときに手動でサブスクライブを解除できないことに注意してください。イベントリスニングを手動で削除する必要がある場合は、次の方法を使用できます:

// subscribe
this.handler = this.renderer.listen('document', "click", event =>{...});

// unsubscribe
this.handler();

ログイン後にコピー

Finite Observable

HTTP サービスまたはタイマー Observable オブジェクトを使用する場合、手動でサブスクライブを解除する必要はありません。

export class TestComponent {
 constructor(private http: Http) { }

 ngOnInit() {
  // 表示1s后发出值，然后就结束了
  Observable.timer(1000).subscribe(console.log);
  this.http.get('http://api.com').subscribe(console.log);
 }
}

ログイン後にコピー

タイマーオペレーター

オペレーター署名

コードをコピーコードは次のとおりです:

public static timer(initialDelay:number | Date, period:number,scheduler:Scheduler):Observable

演算子関数

timer は、特定の時間間隔で無限の自動増加シーケンスを発行する Observable を返します。この間隔はユーザーが選択します。

演算子の例

// 每隔1秒发出自增的数字，3秒后开始发送
var numbers = Rx.Observable.timer(3000, 1000);
numbers.subscribe(x => console.log(x));

// 5秒后发出一个数字
var numbers = Rx.Observable.timer(5000);
numbers.subscribe(x => console.log(x));

ログイン後にコピー

最後のアドバイス

この記事「RxJS: Don't Unsubscribe」で、unsubscribe() メソッドの呼び出しをできるだけ少なくする必要があります。特異的な例は次のとおりです：

RREEE
TAKEUNTILオペレーターOPERATOR SIGNATURATURATURATURE

export class TestComponent {
 constructor(private store: Store) { }

 private componetDestroyed: Subject = new Subject();
 todos: Subscription;
 posts: Subscription;

 ngOnInit() {
   this.todos = this.store.select('todos')
           .takeUntil(this.componetDestroyed).subscribe(console.log); 
           
   this.posts = this.store.select('posts')
           .takeUntil(this.componetDestroyed).subscribe(console.log); 
 }

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

ログイン後にコピー

OPERATOR関数通知者が値を発するまで観察可能なソースが発した値をエミットします。

オペレーターの例

public takeUntil(notifier: Observable): Observable

ログイン後にコピー

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

Angular での購読解除に関する簡単な説明