Angular Academy · Pelajaran

Berhenti Berlangganan dan Kebocoran Memori

Hindari kebocoran dengan takeUntilDestroyed.

Pelajaran 3 dari 413 langkah

Berhenti Berlangganan dan Kebocoran Memori adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.

Masalah kebocoran memori

Jika Anda melakukan subscribe ke observable yang berumur panjang di dalam komponen dan tidak pernah berhenti berlangganan, callback akan terus berjalan setelah komponen dihancurkan. Hal ini membocorkan memori dan dapat menyebabkan error atau pekerjaan yang berulang.

Berhenti berlangganan secara manual

Perbaikan dasarnya: simpan Subscription dan berhenti berlangganan di ngOnDestroy.

import { Component, OnDestroy } from '@angular/core';
import { Subscription, interval } from 'rxjs';

export class WidgetComponent implements OnDestroy {
  private sub = interval(1000).subscribe(n => console.log(n));
  ngOnDestroy() { this.sub.unsubscribe(); }
}

Mengelola beberapa langganan

Satu Subscription dapat mengumpulkan langganan anak dengan .add(), lalu satu unsubscribe() akan menghentikan semuanya.

private subs = new Subscription();
ngOnInit() {
  this.subs.add(a$.subscribe());
  this.subs.add(b$.subscribe());
}
ngOnDestroy() { this.subs.unsubscribe(); }

takeUntilDestroyed

Angular menyediakan takeUntilDestroyed(), yang secara otomatis menyelesaikan aliran saat komponen dihancurkan—tanpa memerlukan ngOnDestroy manual.

import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

export class WidgetComponent {
  constructor() {
    interval(1000)
      .pipe(takeUntilDestroyed())
      .subscribe(n => console.log(n));
  }
}

Persyaratan konteks injeksi

Jika dipanggil tanpa argumen, takeUntilDestroyed() harus berjalan dalam konteks injeksi (seperti konstruktor). Di luar konteks tersebut, berikan DestroyRef secara eksplisit.

import { inject, DestroyRef } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

const destroyRef = inject(DestroyRef);
ngOnInit() {
  source$.pipe(takeUntilDestroyed(destroyRef)).subscribe();
}

Pola takeUntil (klasik)

Sebelum takeUntilDestroyed tersedia, pola standar menggunakan Subject yang memancarkan nilai di ngOnDestroy.

private destroy$ = new Subject<void>();
ngOnInit() {
  source$.pipe(takeUntil(this.destroy$)).subscribe();
}
ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

Aliran yang selesai tidak memerlukan pembersihan

Permintaan HttpClient memancarkan nilai sekali lalu selesai, sehingga membersihkan dirinya sendiri. Biasanya Anda tidak perlu berhenti berlangganan dari satu panggilan HTTP—meskipun takeUntilDestroyed tetap aman digunakan.

Pipa async menanganinya untuk Anda

Pendekatan terbaik untuk templat adalah membiarkan pipa async melakukan subscribe dan unsubscribe secara otomatis. Kita akan membahasnya pada pelajaran berikutnya.

// template:
// <div>{{ user$ | async | json }}</div>
// No manual subscribe / unsubscribe needed

Tanda-tanda kebocoran langganan

Permintaan jaringan yang berulang, penangan yang tetap berjalan setelah navigasi, memori yang terus bertambah di alat pengembang, atau error "Cannot read property of destroyed view" sering kali menunjukkan bahwa proses berhenti berlangganan terlupakan.

toSignal juga membersihkan secara otomatis

Mengubah observable menjadi signal dengan toSignal() juga secara otomatis berhenti berlangganan saat konteks pemilik dihancurkan.

import { toSignal } from '@angular/core/rxjs-interop';

user = toSignal(this.http.get('/api/me'));
// auto-unsubscribed on destroy

Memilih pendekatan

Utamakan pipa async atau toSignal dalam templat; gunakan takeUntilDestroyed() untuk langganan manual; gunakan kumpulan Subscription sebagai pilihan terakhir jika memang diperlukan.

Pemeriksaan Singkat

Uji pemahaman Anda tentang berhenti berlangganan.

Jawab di pelajaran interaktif

Ringkasan: Berhenti Berlangganan & Kebocoran Memori

Selalu hentikan langganan yang berumur panjang.

takeUntilDestroyed() menyelesaikan aliran secara otomatis saat penghancuran.
Pipa async dan toSignal() mengelola langganan untuk Anda.
Panggilan HTTP tunggal selesai dengan sendirinya.

Berikutnya: pipa async secara mendalam.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 38
Pelajaran: 144

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Berhenti Berlangganan dan Kebocoran Memori” gratis?

Ya — teks lengkap “Berhenti Berlangganan dan Kebocoran Memori” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Berhenti Berlangganan dan Kebocoran Memori”?

Hindari kebocoran dengan takeUntilDestroyed. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Angular Academy?

Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Berhenti Berlangganan dan Kebocoran Memori” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Observable dan Subscription
Subject dan BehaviorSubject
Berhenti Berlangganan dan Kebocoran Memori
Pipe async

← Kembali ke Angular Academy