Panduan Pemula untuk Kitaran Hayat Komponen Sudut

Sebelum terjun ke dalam cangkuk kitaran hayat, adalah penting untuk mempunyai pemahaman asas tentang beberapa topik teras. Menurut dokumentasi Angular:

Prasyarat

Sebelum menggunakan cangkuk kitaran hayat, anda harus mempunyai pemahaman asas tentang perkara berikut:

• Pengaturcaraan TypeScript
• Asas reka bentuk aplikasi sudut, seperti yang diterangkan dalam Konsep Sudut

Setelah anda selesa dengan prasyarat ini, anda sudah bersedia untuk meneroka cangkuk kitaran hayat berkuasa yang disediakan oleh Angular.

Kitaran hayat komponen sudut ialah teras cara komponen sudut dicipta, dikemas kini dan dimusnahkan. Memahami kitaran hayat ini membolehkan pembangun mengawal gelagat komponen sepanjang jangka hayat mereka, mempertingkatkan kefungsian dan pengalaman pengguna. Dalam artikel ini, kami akan memecahkan cangkuk kitar hayat komponen Angular, memberikan contoh dan menerangkan kes penggunaan biasa mereka.

Apakah Cangkuk Kitaran Hayat dalam Sudut?

Angular menyediakan beberapa cangkuk kitaran hayat yang boleh dimanfaatkan oleh pembangun untuk melaksanakan kod tertentu pada peringkat kitaran hayat komponen yang berbeza. Daripada memulakan komponen kepada memusnahkannya, cangkuk ini membantu mengurus keadaan komponen, tingkah laku dan pembersihan sumber.

Berikut ialah senarai semua cangkuk kitaran hayat dalam Angular:

1. ngOnChanges
2. ngOnInit
3. ngDoCheck
4. ngAfterContentInit
5. ngAfterContentChecked
6. ngAfterViewInit
7. ngAfterViewChecked
8. ngOnDestroy

Setiap cangkuk mempunyai tujuan tertentu dan dipanggil pada masa tertentu semasa kitaran hayat komponen. Mari selami setiap satu.

---

1. ngOnChanges

Tujuan: Dipanggil apabila sifat input berubah.

Ini ialah cangkuk kitar hayat pertama yang dipanggil selepas komponen dibina. Kaedah ngOnChanges dicetuskan setiap kali nilai sifat input berubah. Ia amat berguna apabila anda ingin melaksanakan kod sebagai tindak balas kepada perubahan dalam sifat input terikat komponen.

Contoh:

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-sample',
  template: `<p>{{ data }}</p>`
})
export class SampleComponent implements OnChanges {
  @Input() data: string;

  ngOnChanges(changes: SimpleChanges): void {
    console.log('Data changed:', changes.data.currentValue);
  }
}

---

2. ngOnInit

Tujuan: Dipanggil sekali, selepas ngOnChanges pertama komponen.

Cangkuk ngOnInit ialah tempat kebanyakan kod permulaan pergi. Ia adalah tempat yang bagus untuk memulakan sifat, menyediakan sebarang langganan yang diperlukan atau membuat panggilan HTTP yang bergantung kepada komponen tersebut.

Contoh:

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

@Component({
  selector: 'app-sample',
  template: `<p>{{ info }}</p>`
})
export class SampleComponent implements OnInit {
  info: string;

  ngOnInit(): void {
    this.info = 'Component initialized!';
  }
}

---

3. ngDoCheck

Tujuan: Dipanggil semasa setiap pengesanan perubahan dijalankan.

Cangkuk ngDoCheck membolehkan anda melaksanakan algoritma pengesanan perubahan anda sendiri. Ini boleh berguna untuk menjejaki perubahan mendalam dalam objek yang Angular tidak dapat dikesan secara asli. Walau bagaimanapun, gunakannya dengan berhati-hati kerana ia boleh menjejaskan prestasi jika tidak digunakan dengan betul.

Contoh:

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-sample',
  template: `<p>{{ data }}</p>`
})
export class SampleComponent implements OnChanges {
  @Input() data: string;

  ngOnChanges(changes: SimpleChanges): void {
    console.log('Data changed:', changes.data.currentValue);
  }
}

---

4. ngAfterContentInit

Tujuan: Dipanggil sekali, selepas ngDoCheck pertama.

Cakuk ini digunakan selepas Angular telah menayangkan kandungan luaran ke dalam komponen. Ia amat berguna dalam komponen yang digunakan untuk memasukkan kandungan luaran dalam templatnya.

Contoh:

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

@Component({
  selector: 'app-sample',
  template: `<p>{{ info }}</p>`
})
export class SampleComponent implements OnInit {
  info: string;

  ngOnInit(): void {
    this.info = 'Component initialized!';
  }
}

---

5. ngAfterContentChecked

Tujuan: Dipanggil selepas setiap pemeriksaan kandungan yang diunjurkan.

Cangkuk kitar hayat ngAfterContentChecked dilaksanakan setiap kali Angular menyemak kandungan yang diunjurkan ke dalam komponen. Ia serupa dengan ngAfterContentInit tetapi berjalan selepas setiap kitaran pengesanan perubahan.

Contoh:

import { Component, DoCheck } from '@angular/core';

@Component({
  selector: 'app-sample',
  template: `<p>{{ count }}</p>`
})
export class SampleComponent implements DoCheck {
  count: number = 0;

  ngDoCheck(): void {
    console.log('Change detection running');
    this.count++;
  }
}

---

6. ngAfterViewInit

Tujuan: Dipanggil sekali, selepas ngAfterContentChecked yang pertama.

Cangkuk kitar hayat ini digunakan untuk melakukan tindakan selepas paparan komponen (dan sebarang paparan kanak-kanak) telah dimulakan. Ia biasanya digunakan untuk memanipulasi atau membaca sifat anak pandangan selepas Angular telah memaparkannya.

Contoh:

import { Component, AfterContentInit } from '@angular/core';

@Component({
  selector: 'app-sample',
  template: `<ng-content></ng-content>`
})
export class SampleComponent implements AfterContentInit {
  ngAfterContentInit(): void {
    console.log('Content projected');
  }
}

---

7. ngAfterViewChecked

Tujuan: Dipanggil selepas setiap pemeriksaan paparan komponen.

Cangkuk ini dipanggil selepas Angular menyemak paparan komponen untuk kemas kini. Ia serupa dengan ngAfterViewInit tetapi berjalan selepas setiap kitaran pengesanan perubahan. Ini boleh digunakan untuk menggunakan logik yang bergantung pada kemas kini dalam paparan.

Contoh:

import { Component, AfterContentChecked } from '@angular/core';

@Component({
  selector: 'app-sample',
  template: `<ng-content></ng-content>`
})
export class SampleComponent implements AfterContentChecked {
  ngAfterContentChecked(): void {
    console.log('Projected content checked');
  }
}

---

8. ngOnDestroy

Tujuan: Dipanggil sejurus sebelum Angular memusnahkan komponen.

Cangkuk ngOnDestroy ialah tempat untuk melaksanakan tugas pembersihan, seperti menyahlanggan daripada yang boleh diperhatikan, menanggalkan pengendali acara atau melepaskan sumber yang mungkin menyebabkan kebocoran memori.

Contoh:

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-sample',
  template: `<p #textElement>Hello, world!</p>`
})
export class SampleComponent implements AfterViewInit {
  @ViewChild('textElement') textElement: ElementRef;

  ngAfterViewInit(): void {
    console.log('View initialized:', this.textElement.nativeElement.textContent);
  }
}

Kesimpulan

Memahami dan menggunakan cangkuk kitar hayat ini dengan berkesan boleh memberi anda kawalan terperinci ke atas aplikasi Sudut anda. Daripada memulakan data dalam ngOnInit hingga membersihkan sumber dalam ngOnDestroy, cangkuk kitaran hayat menyediakan kawalan penting yang diperlukan untuk aplikasi dinamik.

Dalam artikel kami yang seterusnya, kami akan menyelami lebih mendalam tentang cara cangkuk ini berfungsi bersama dalam aplikasi Sudut dunia sebenar, menunjukkan contoh kitaran hayat dan interaksi yang lebih kompleks.

Atas ialah kandungan terperinci Panduan Pemula untuk Kitaran Hayat Komponen Sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!