Pembelajaran sudut bercakap tentang kitaran hayat

Artikel ini akan membantu anda terus belajar sudut Apabila menggunakan sudut untuk pembangunan, anda tidak boleh mengelakkan keperluan untuk didedahkan kepada kitaran hayat. 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.

Sesuatu komponen akan melalui beberapa siri peringkat dari awal hingga masa ia dimusnahkan. 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. [Cadangan tutorial berkaitan: "tutorial sudut"] 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 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 mempunyai atribut terikat kepada @Input Dipanggil apabila nilai perubahan.

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 id="count-nbsp-nbsp-count-nbsp">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 , panggil ngDoCheck selepas panggilan pertama, dan hanya memanggilnya sekali. ngAfterContentInit

// demo.component.ts

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

ngAfterContentChecked

Fungsi cangkuk dipanggil selepas setiap ngAfterContentChecked.ngDoCheck

// demo.component.ts

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

ngAfterViewInit

Panggil fungsi cangkuk ini selepas permulaan paparan selesai. Dipanggil selepas

pertama, sekali sahaja. ngAfterContentChecked

Pada masa ini, adalah lebih munasabah untuk mendapatkan

nod halamanDOM

// demo.compoent.ts

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

ngAfterViewChecked

视图检测完成调用。在 ngAfterViewinit 后调用，和在每次 ngAfterContentChecked 之后调用，也就是在每次 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 Pembelajaran sudut bercakap tentang kitaran hayat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!