Kitaran Hayat Komponen dalam Sudut

Kait kitar hayat bersudut ialah kaedah yang membolehkan pembangun memanfaatkan detik-detik penting kitaran hayat komponen Sudut, daripada penciptaannya hingga kemusnahannya yang merangkumi permulaan, perubahan dan pemusnahan. Cangkuk kitar hayat yang paling biasa digunakan ialah:

1. Pembina: Dipanggil apabila halaman dimuatkan pada kali pertama. Dipanggil sekali sahaja.
2. ngOnChanges: Laksanakan beberapa kali. kali pertama akan dilaksanakan apabila komponen dibuat/dimuatkan. Apabila terdapat perubahan dalam harta tersuai dengan @input decorator yang setiap kali cangkuk ini akan dipanggil. bekerja dengan hujah - perubahan mudah
3. ngOnInit: Dipanggil sebaik sahaja komponen dimulakan. Sesuai untuk menetapkan keadaan komponen.
4. ngDoCheck: Digunakan untuk mengesan perubahan secara manual (dipanggil dengan setiap kitaran pengesanan perubahan).
5. ngAfterContentInit: Dipanggil selepas kandungan ditayangkan ke dalam komponen.
6. ngAfterContentChecked: Dipanggil selepas kandungan yang diunjurkan disemak.
7. ngAfterViewInit: Dipanggil selepas paparan dimulakan.
8. ngAfterViewChecked: Dipanggil selepas Angular menyemak paparan komponen.
9. ngOnDestroy: Dipanggil sejurus sebelum komponen dimusnahkan. Gunakannya untuk membersihkan sumber, seperti berhenti melanggan daripada observables.

Sebelum menyelam, mari buat projek prasyarat:
Kami memerlukan komponen ibu bapa dan anak. Kami akan mempunyai medan Input dalam komponen induk dan akan memberikan nilai yang dimasukkan itu kepada anak dan akan ditunjukkan dalam komponen anak.

induk.komponen.ts

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  value:string = '';
  SubmitValue(val: any) {
    this.value = val.value;
  }

}

parent.component.html

<h1 id="Lifecycle-Hooks">Lifecycle Hooks</h1>

<input type="text" placeholder="Input here...">
<button>Submit Value</button>

<br><br>
<app-child></app-child>

kanak-kanak.komponen.ts

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  constructor() { }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {
  }

}

child.component.html

<div>
    Input Value: <strong>{{inputValue}}</strong>
</div>

Kami akan mempunyai output seperti ini:

1.Pembina

• Pembina ialah kaedah kelas TypeScript yang digunakan untuk memulakan komponen. Ia dipanggil sebelum sebarang cangkuk kitar hayat sudut.
• Penggunaan utama: Mulakan suntikan kebergantungan dan sediakan pembolehubah.

export class ChildComponent implements OnInit {

  constructor() {
    **console.log("Constructor Called");**
  }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {}

}

2.ngOnChanges

• Dipanggil apabila sebarang sifat input komponen ditukar.
• Menyediakan objek SimpleChanges yang mengandungi nilai sebelumnya dan semasa bagi sifat input.
• Penggunaan: Kemas kini sifat input data daripada komponen induk untuk mencetuskan cangkuk ini.

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  value:string = '';
  SubmitValue(val: any) {
    this.value = val.value;
  }

}

Sekali lagi saya telah memasukkan nilai dan sekali lagi ngOnChanges dipanggil tetapi pembina hanya memanggil sekali.

Mari kita lihat apa yang ada dalam hujah perubahan:

<h1 id="Lifecycle-Hooks">Lifecycle Hooks</h1>

<input type="text" placeholder="Input here...">
<button>Submit Value</button>

<br><br>
<app-child></app-child>

Mari kita nilai dan lihat:

3.ngOnInit

• Dipanggil sekali selepas ngOnChanges yang pertama.
• Penggunaan utama: Mulakan komponen dan sediakan sebarang data yang diperlukan untuk pemaparan.

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  constructor() { }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {
  }

}

4.ngDoCheck

• Berjalan setiap kali Angular mengesan perubahan dalam komponen atau anak-anaknya.
• Gunakan ini untuk logik pengesanan perubahan tersuai.

<div>
    Input Value: <strong>{{inputValue}}</strong>
</div>

5.ngAfterContentInit

• Dipanggil sekali selepas kandungan (cth., ) ditayangkan ke dalam komponen.

child.component.html

export class ChildComponent implements OnInit {

  constructor() {
    **console.log("Constructor Called");**
  }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {}

}

parent.component.html

export class ChildComponent implements OnInit, OnChanges {

  constructor() {
    console.log("Constructor Called");
  }

  ngOnChanges(changes: SimpleChanges): void {
    console.log("ngOnChanges Called");
  }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {}

}

kanak-kanak.komponen.ts

 ngOnChanges(changes: SimpleChanges): void {
    console.log("ngOnChanges Called", changes);
  }

6.ngAfterContentChecked

• Dipanggil selepas setiap pemeriksaan kandungan yang diunjurkan.
• Gunakan dengan berhati-hati untuk mengelakkan masalah prestasi.

export class ChildComponent implements OnInit, OnChanges {

  constructor() {
    console.log("Constructor Called");
  }
  ngOnChanges(changes: SimpleChanges): void {
    console.log("ngOnChanges Called");
  }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {
    console.log("ngOnInit Called");
  }

}

jom main-main ni:

export class ChildComponent implements OnInit, OnChanges, DoCheck {

  constructor() {
    console.log("Constructor Called");
  }
  ngOnChanges(changes: SimpleChanges): void {
    console.log("ngOnChanges Called", changes);
  }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {
    console.log("ngOnInit Called");
  }

  ngDoCheck() {
    console.log("ngDoCheck Called");
  }

}

Apabila terdapat perubahan dalam ng-kandungan sekali lagi ngAfterContentChecked dipanggil.

7.ngAfterViewInit

• Dipanggil sekali selepas paparan komponen dan paparan anaknya telah dimulakan.
• Berguna untuk memulakan pustaka pihak ketiga atau manipulasi DOM.

8.ngAfterViewChecked

• Dipanggil selepas setiap pemeriksaan paparan komponen dan paparan anaknya.

9.ngOnDestroy

• Dipanggil sejurus sebelum komponen dimusnahkan.
• Gunakannya untuk tugas pembersihan seperti menyahlanggan daripada Observables atau mengalihkan pendengar acara.

ngOnDestroy hanya akan dipanggil apabila kita memusnahkan mana-mana komponen, jadi mari cuba alih keluar komponen anak apabila kita mengklik butang Musnah komponen.
Jom uruskan:

induk.komponen.ts

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  value:string = '';
  SubmitValue(val: any) {
    this.value = val.value;
  }

}

parent.component.html

<h1 id="Lifecycle-Hooks">Lifecycle Hooks</h1>

<input type="text" placeholder="Input here...">
<button>Submit Value</button>

<br><br>
<app-child></app-child>

Sebelum kami mengklik butang Musnah komponen:

Selepas kami mengklik butang Hancurkan komponen:

Jujukan Cangkuk Kitar Hidup:

1. Pembina
2. ngOnChanges (jika sifat @Input wujud)
3. ngOnInit
4. ngDoCheck
5. ngAfterContentInit
6. ngAfterContentChecked
7. ngAfterViewInit
8. ngAfterViewChecked
9. ngOnDestroy

Dengan memahami dan menggunakan cangkuk ini dengan berkesan, anda boleh mengurus gelagat komponen pada peringkat berbeza kitaran hayatnya.

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