Rumah >hujung hadapan web >tutorial js >Artikel untuk bercakap tentang kitaran hayat dalam Angular

Artikel untuk bercakap tentang kitaran hayat dalam Angular

青灯夜游
青灯夜游ke hadapan
2022-05-06 10:58:033890semak imbas

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.

Artikel untuk bercakap tentang kitaran hayat dalam Angular

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:

Artikel untuk bercakap tentang kitaran hayat dalam Angular

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(&#39;1. demo constructor&#39;)
  }

  ngOnChanges() {
    console.log(&#39;2. demo ngOnChanges&#39;)
  }

  ngOnInit() {
    console.log(&#39;3. demo ngOnInit&#39;)
  }

}

Artikel untuk bercakap tentang kitaran hayat dalam Angular

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++;
}

Artikel untuk bercakap tentang kitaran hayat dalam Angular

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')
}

Artikel untuk bercakap tentang kitaran hayat dalam Angular

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(&#39;5. demo ngAfterContentInit&#39;);
}

Artikel untuk bercakap tentang kitaran hayat dalam Angular

ngAfterContentChecked

ngAfterContentChecked Fungsi cangkuk dipanggil selepas setiap ngDoCheck.

// demo.component.ts

ngAfterContentChecked() {
  console.log(&#39;5. demo ngAfterContentChecked&#39;);
}

Artikel untuk bercakap tentang kitaran hayat dalam Angular

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(&#39;7. demo ngAfterViewInit&#39;);
}

Artikel untuk bercakap tentang kitaran hayat dalam Angular

ngAfterViewChecked

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

// demo.component.ts

ngAfterViewChecked() {
  console.log(&#39;8. ngAfterViewChecked&#39;)
}

Artikel untuk bercakap tentang kitaran hayat dalam Angular

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(&#39;9. demo ngOnDestroy&#39;)
}

Artikel untuk bercakap tentang kitaran hayat dalam Angular

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!

Kenyataan:
Artikel ini dikembalikan pada:juejin.cn. Jika ada pelanggaran, sila hubungi admin@php.cn Padam