前提・実現したいこと
Angular9で、
カウンターからobservable を作成したりするとします。
https://angular.io/guide/rx-library
以下のようなコンポーネントで作成した場合、テンプレートでログが出力され続けます。
import { Component } from '@angular/core';
import { interval } from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular-tour-of-heros';
constructor(
){}
ngOnInit(): void {
// Create an Observable that will publish a value on an interval
const secondsCounter = interval(1000);
// Subscribe to begin publishing values
secondsCounter.subscribe(n =>
console.log(`It's been ${n} seconds since subscribing!`));
}
}
この処理をすると、このコンポーネントを利用するテンプレートでは、延々に処理が続き、メモリリークを起こすとも記載されるサイトも見られます。
https://angular.io/guide/lifecycle-hooks#ondestroy
これを回避するために、ngOnDestroy()を使用しようと考えいます。
https://angular.io/guide/lifecycle-hooks#lifecycle-sequence
質問
上記に対しどう対応するのかご教授ください。
マニュアルからでは、ngOnDestroy()をどうやって使用すればいいのかわかりません。
そもそもngOnDestroy()する意味を間違えているのであればご指摘ください。
参考
ここに問題に対して試したことを記載してください。
→説明を読んだだけでは利用の仕方が分からず。
補足情報(FW/ツールのバージョンなど)
https://qiita.com/ksh-fthr/items/ccd9861f919c4aa30ae8
https://lacolaco.hatenablog.com/entry/2018/04/10/230413
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+1
ngOnDestroyメソッドはコンポーネントが破棄されるときに呼ばれるライフサイクルメソッドです。
これを実行しただけではIntervalで指定している処理が止まるわけでなく、この中にIntervalを止める記述を書く必要があります。
そのための前提として以下を知っておく必要があります
・Observable.subscribe()メソッドは戻り値としてSubscriptionオブジェクトを返している。
・Subscriptionオブジェクトはunsubscribeメソッドを持っており、これを実行することでObservableの購読を停止することが出来る。
上記を踏まえて以下のように変更してみてください
export class AppComponent implements OnInit, OnDestroy {
title = 'angular-tour-of-heros';
intervalSubs: Subscription;
constructor(
){}
ngOnInit(): void {
// Create an Observable that will publish a value on an interval
const secondsCounter = interval(1000);
// Subscribe to begin publishing values
this.intervalSubs = secondsCounter.subscribe(n =>
console.log(`It's been ${n} seconds since subscribing!`)
);
}
ngOnDestroy(): void{
if (this.intervalSubs){
this.intervalSubs.unsubscribe();
}
}
}
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
下記参考
https://gitbook.lacolaco.net/angular-after-tutorial/season-2-effective-rxjs/observable-lifecycle
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.32%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2020/04/30 19:11
また前提知識のフォローありがとうございます。
後、購読が停止されているかの確認ですが、手段はありますでしょうか?
こういう仕様であるというのが回答になるのでしょうか?
再度の質問になりますが回答頂ければ助かります。
2020/04/30 21:59
今回の場合だと関数内のconsole.logが出力されていなければ大丈夫です
2020/04/30 22:58
`実行されていなかったら停止`とのことですが、ある程度の時間(どこかで設定している?)が経つと、
メモリがある上限以上とかの判断をして止まると認識していいでしょうか?、そこあたりもう少し
具体的に頂けたら思います。
しつこくてすみません・・・
2020/04/30 23:30 編集
ngOnDestroyが実行されたタイミングで this.intervalSubs.unsubscribe(); を実行していますので
その処理で購読が解除されて、以降は console.log('It's been ${n} seconds since subscribing!') は実行されなくなります
ngOnDestroyの実行されるタイミングはコンポーネントが削除されたときです(ルーティングなどでこのコンポーネントが表示されなくなった時)
2020/04/30 23:37
任意のタイミングやユーザーの操作によって購読を解除したい場合はクリック処理などの実行のタイミングで
this.intervalSubs.unsubscribe(); を実行すれば大丈夫です
2020/04/30 23:39