Angular Academy · Pelajaran

ngOnInit dan Inisialisasi

Jalankan logika penyiapan saat komponen dimulai.

Pelajaran 1 dari 413 langkah

ngOnInit dan Inisialisasi adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.

Apa Itu Kait Siklus Hidup?

Komponen Angular memiliki siklus hidup yang dikelola oleh kerangka kerja: pembuatan, deteksi perubahan, perenderan, dan penghancuran. Kait siklus hidup memungkinkan Anda menjalankan kode pada waktu tertentu.

Memperkenalkan OnInit

Kait OnInit dijalankan sekali, setelah Angular menetapkan masukan komponen dan merender tampilan awal. Kait ini merupakan tempat standar untuk logika inisialisasi.

Menerapkan OnInit

Terapkan antarmuka OnInit dan tambahkan metode ngOnInit. Angular akan memanggilnya secara otomatis.

import { Component, OnInit } from "@angular/core";

@Component({ selector: "app-demo", template: "" })
export class DemoComponent implements OnInit {
  ngOnInit(): void {
    console.log("Component initialized");
  }
}

Constructor vs ngOnInit

Constructor dijalankan terlebih dahulu, sebelum masukan ditetapkan, dan seharusnya hanya melakukan injeksi dependensi ringan. Gunakan ngOnInit untuk penyiapan sebenarnya setelah masukan tersedia.

constructor(private http: HttpClient) {
  // inputs NOT ready yet
}

ngOnInit() {
  // inputs ARE ready here
}

Masukan Siap di ngOnInit

Saat ngOnInit dijalankan, semua properti @Input telah memiliki nilai awal yang diikat dari induknya.

@Input() userId!: string;

ngOnInit() {
  console.log(this.userId); // available
}

Mengambil Data di ngOnInit

Pola yang umum adalah memuat data dari layanan di ngOnInit, karena Anda memiliki akses ke masukan dan dependensi.

ngOnInit() {
  this.userService.getUser(this.userId)
    .subscribe(u => this.user = u);
}

ngOnInit Dijalankan Sekali

Berbeda dari kait deteksi perubahan, ngOnInit dijalankan tepat sekali selama siklus hidup komponen, segera setelah ngOnChanges pertama.

Urutan Relatif terhadap ngOnChanges

Jika komponen memiliki masukan, ngOnChanges dijalankan terlebih dahulu dengan nilai awal, lalu ngOnInit dijalankan. Tanpa masukan pun, ngOnInit tetap dijalankan.

// sequence with inputs:
// 1. constructor
// 2. ngOnChanges (first)
// 3. ngOnInit

Menginisialisasi Formulir

Membangun formulir reaktif merupakan tugas klasik ngOnInit karena Anda mungkin memerlukan layanan yang diinjeksi untuk menyiapkan formulir.

form!: FormGroup;

ngOnInit() {
  this.form = this.fb.group({
    name: [""],
    email: [""]
  });
}

Jaga Constructor Tetap Ringan

Hindari pekerjaan berat di dalam constructor. Constructor dijalankan sebelum Angular menghubungkan masukan, dan efek samping di sana membuat komponen lebih sulit diuji dan diprediksi.

Inisialisasi Asinkron

Anda dapat memanggil logika asinkron dari ngOnInit, tetapi metode itu sendiri mengembalikan void; lakukan subscribe atau gunakan pola asinkron di dalamnya.

ngOnInit() {
  this.loadAsync();
}

private async loadAsync() {
  this.data = await firstValueFrom(this.api.get());
}

Pemeriksaan Singkat

Uji pemahaman Anda tentang OnInit.

Jawab di pelajaran interaktif

Ringkasan

Kait OnInit dengan ngOnInit dijalankan sekali setelah masukan diikat dan ideal untuk mengambil data serta menyiapkan formulir. Jaga constructor tetap ringan dan lakukan inisialisasi di ngOnInit.

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 “ngOnInit dan Inisialisasi” gratis?

Ya — teks lengkap “ngOnInit dan Inisialisasi” 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 “ngOnInit dan Inisialisasi”?

Jalankan logika penyiapan saat komponen dimulai. 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 1 dari 4.

Berapa lama pelajaran “ngOnInit dan Inisialisasi” 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

← Kembali ke Angular Academy