Artikel untuk bercakap tentang kitaran hayat dalam Angular

Apabila membangun menggunakan sudut, tidak dapat dielakkan untuk didedahkan kepada kitaran hayat Dalam artikel ini, kita akan bercakap tentang kitaran hayat dalam Angular Saya harap ia akan membantu semua orang.

Pembaca yang telah didedahkan dengan perkembangan react dan vue harus biasa dengan konsep kitaran hayat. Kita tidak boleh mengelakkannya dalam proses pembangunan menggunakan angular. [Tutorial berkaitan yang disyorkan: "tutorial sudut"]

komponen akan melalui satu siri peringkat daripada penciptaan hingga kemusnahan. Ini ialah kitaran hayat, dan peringkat ini sepadan dengan lifecycle hooks yang disediakan oleh aplikasi.

Jadi, apakah ini angular dalam hooks? Memahami mereka adalah penting untuk tempat anda harus menulis program anda. Dalam

angular, susunan pelaksanaan kitaran hayat adalah seperti berikut:

- constructor 【常用，不算钩子函数，但是很重要】
- ngOnChanges【常用】
- ngOnInit【常用】
- ngDoCheck
  - ngAfterContentInit
  - ngAfterContentChecked
  - ngAfterViewInit【常用】
  - ngAfterViewChecked
- ngOnDestroy【常用】

Untuk penjelasan dan pengesahan, kami menggunakan angular-cli untuk menjana projek demo.

pembina

Apabila es6 dalam class memulakan objek, constructor akan dipanggil serta-merta. Komponen

class Person {
  constructor(name) {
    console.log('be called')
    this.name = name;
  }
}

let jimmy = new Person('jimmy'); // be called

angular itu sendiri mengeksport kelas. Apabila komponen ini dinaikkan sebanyak new, ia akan mendapat nilai lalai dalam constructor.

ngOnChanges

Apabila kita mempunyai perubahan parameter luaran, kita akan melaksanakan ngOnChanges, yang bermaksud bahawa komponen akan dipanggil apabila nilai atribut terikat kepada @Input berubah.

Ringkasnya, apabila komponen induk mengikat elemen dalam komponen anak, fungsi cangkuk ini akan dicetuskan, dan ia boleh dimulakan beberapa kali. Ini sentiasa diperkenalkan dalam ngOnInit di bawah.

ngOnInit

Apabila kaedah ini dipanggil, ini bermakna komponen telah berjaya dimulakan. Dipanggil selepas ngOnChanges() pertama selesai, dan sekali sahaja.

// app.component.ts
export class AppComponent implements OnInit, OnChanges {

  constructor() {
    console.log('1. constructor')
  }

  ngOnChanges() {
    console.log('2. ngOnChanges')
  }

  ngOnInit() {
    console.log('3. ngOnInit')
  }
}

Maklumat yang dicetak adalah seperti berikut:

Hah? Mengapakah maklumat fungsi cangkuk dalam ngOnChanges tidak dicetak?

Seperti yang dinyatakan di atas, keadaan pencetus @Input perlu dicetuskan apabila nilai atribut berubah. Mari kita ubah suainya:

<!-- app.component.html -->
<div>
  <app-demo></app-demo>
</div>

// app.component.ts
// AppComponent 类中添加属性
public count:number = 0;

<!-- demo.component.html -->
<h3>count: {{ count }}</h3>

// demo.component.ts
export class DemoComponent implements OnInit, OnChanges {

  @Input()
  public count: number;

  constructor() {
    console.log('1. demo constructor')
  }

  ngOnChanges() {
    console.log('2. demo ngOnChanges')
  }

  ngOnInit() {
    console.log('3. demo ngOnInit')
  }

}

Apabila nilai diserahkan kepada komponen anak @Input melalui demo, maka Akan pencetus demo dalam komponen ngOnChanges.

Apabila sifat yang dilalui oleh @Input berubah, fungsi cangkuk demo dalam komponen ngOnChanges boleh dicetuskan beberapa kali.

<!-- app.component.html -->
<div>
  <app-demo [count]="count"></app-demo>

  <button (click)="parentDemo()">parent button</button>
</div>

// app.component.ts
parentDemo() {
  this.count++;
}

ngDoCheck

Cetuskan fungsi cangkuk ini apabila pengesanan perubahan berlaku.

Fungsi cangkuk ini dipanggil serta-merta selepas setiap pengesanan perubahan ngOnChanges dan pengesanan perubahan kali pertama dilaksanakan ngOnInit.

// demo.component.ts

ngDoCheck() {
  console.log('4. demo ngDoCheck')
}

Fungsi cangkuk ini dipanggil lebih kerap dan lebih mahal untuk digunakan, jadi gunakannya dengan berhati-hati.

Secara amnya gunakan ngOnChanges untuk mengesan perubahan dan bukannya ngDoCheck

ngAfterContentInit

Apabila menayangkan kandungan luaran kepada komponen dalaman, panggilan pertamangDoCheck dipanggil selepas ngAfterContentInit, dan sekali sahaja.

// demo.component.ts

ngAfterContentInit() {
  console.log('5. demo ngAfterContentInit');
}

ngAfterContentChecked

ngAfterContentChecked Fungsi cangkuk dipanggil selepas setiap ngDoCheck.

// demo.component.ts

ngAfterContentChecked() {
  console.log('5. demo ngAfterContentChecked');
}

ngAfterViewInit

Panggil fungsi cangkuk ini selepas permulaan paparan selesai. Dipanggil selepas ngAfterContentChecked pertama, sekali sahaja.

Pada masa ini, adalah lebih munasabah untuk mendapatkan DOM nod halaman

// demo.compoent.ts

ngAfterViewInit() {
  console.log('7. demo ngAfterViewInit');
}

ngAfterViewChecked

Lihat panggilan penyiapan pengesanan. Dipanggil selepas ngAfterViewinit, dan dipanggil selepas setiap ngAfterContentChecked, iaitu, dipanggil selepas setiap ngDoCheck.

// demo.component.ts

ngAfterViewChecked() {
  console.log('8. ngAfterViewChecked')
}

ngOnDestroy

组件被销毁时候进行的操作。

在这个钩子函数中，我们可以取消订阅，取消定时操作等等。

<!-- app.component.html -->
<app-demo [count]="count" *ngIf="showDemoComponent"></app-demo>

<button (click)="hideDemo()">hide demo component</button>

// app.component.ts
public showDemoComponent: boolean = true;

hideDemo() {
  this.showDemoComponent = false
}

// demo.component.ts
ngOnDestroy() {
  console.log('9. demo ngOnDestroy')
}

PS: 不知道读者有没有发现，调用一次的钩子函数都比较常用～

【完】

更多编程相关知识，请访问：编程入门！！

Atas ialah kandungan terperinci Artikel untuk bercakap tentang kitaran hayat dalam Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!