Rumah >hujung hadapan web >tutorial js >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
.
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
.
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.
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++; }
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
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
Fungsi cangkuk dipanggil selepas setiap ngDoCheck
.
// demo.component.ts ngAfterContentChecked() { console.log('5. demo ngAfterContentChecked'); }
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'); }
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') }
组件被销毁时候进行的操作。
在这个钩子函数中,我们可以取消订阅,取消定时操作等等。
<!-- 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!