Help us understand the problem. What is going on with this article?

Observableのsubscribeを停止する

More than 1 year has passed since last update.

view側で async pipe を通してできた実態を参照できないときに、Observablesubscribe する必要があったので、その時のことをメモ。

Observable の実態を async pipe を通して実態を参照するやり方をしていたが、それができない時にJS側で subscribe する必要があった。

qiita.html
<ng-container *ngIf="users$ | async as users">
  <ng-container *ngFor="let user of users.userInformation; let i = index">
    ...
  </ng-container>
</ng-container>

subscribe すると、画面遷移しても subscribe が残り続けてしまっていたので、Angularがディレクティブ/コンポーネントを破壊する直前に、 unsubscribe した。

qiita.ts
import { Component, OnDestroy } from '@angular/core';
import { ActivatedRoute } from "@angular/router";
import { Observable, Subscription } from 'rxjs';
import { UsersStateService, IUsers } from "../../states/users-state.service";

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnDestroy {
  // ① Subscriptionをインスタンス化
  public subscription = new Subscription();
  public users$: Observable<IUsers>;

  constructor(
    public usersState: UsersStateService
    private route: ActivatedRoute
  ) {
    this.queryParams = this.route.snapshot.queryParams;

    this.usersState.fetch();

    // ② subscribeするときに、subscribeの返り値のSubscriptionをadd()しておく
    this.subscription.add(this.users$.subscribe((user) => {
      if (user) {
        this.user = user.userInformations.find((user) => {
          return user.userId === parseInt(this.queryParams.userId, 10);
        });
      }
    }));
  }

  public ngOnDestroy(): void {
    // ③ Componentが破棄されるタイミングで、subscriptionを全てunsubscribeする
    this.subscription.unsubscribe();
  }
}

y4m4to
渋谷の転職サービスの会社で働くフロントエンド・エンジニア
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away