Rumah >hujung hadapan web >tutorial js >Pembelajaran sudut bercakap tentang komunikasi komponen dan kitaran hayat komponen
Artikel ini akan membawa anda melalui komunikasi komponen dan kitaran hayat komponen dalam sudut Ia akan memperkenalkan secara ringkas kaedah pemindahan data ke bahagian dalam komponen dan kaedah pemindahan data ke luar. Saya harap ia akan membantu semua orang!
1 🎜 >
<app-favorite [isFavorite]="true"></app-favorite>[Cadangan tutorial berkaitan: "
// favorite.component.ts import { Input } from '@angular/core'; export class FavoriteComponent { @Input() isFavorite: boolean = false; }tutorial sudut di luar atribut untuk menunjukkan pengikatan dinamik value , selepas diterima dalam komponen, ia adalah jenis Boolean Tanpa
, ia bermakna mengikat nilai normal Selepas diterima dalam komponen, ia adalah []
. []
字符串类型
<app-favorite [is-Favorite]="true"></app-favorite>
import { Input } from '@angular/core'; export class FavoriteComponent { @Input("is-Favorite") isFavorite: boolean = false }
2. Komponen memindahkan data ke luar Keperluan: Hantar data ke sub-komponen dengan mengklik butang butang Komponen induk
<!-- 子组件模板 --> <button (click)="onClick()">click</button>
// 子组件类 import { EventEmitter, Output } from "@angular/core" export class FavoriteComponent { @Output() change = new EventEmitter() onClick() { this.change.emit({ name: "张三" }) } }
<!-- 父组件模板 --> <app-favorite (change)="onChange($event)"></app-favorite>
// 父组件类 export class AppComponent { onChange(event: { name: string }) { console.log(event) } }Kitaran hayat komponen
1. Fasa pelekap Fungsi kitaran hayat fasa pelekap hanya dilaksanakan sekali semasa fasa pelekap dan tidak lagi dilaksanakan apabila data dikemas kini.
1), pembina
Angular dilaksanakan apabila menginstant kelas komponen dan boleh digunakan untuk menerima objek contoh perkhidmatan yang disuntik oleh Angular.
2), ngOnInitexport class ChildComponent { constructor (private test: TestService) { console.log(this.test) // "test" } }
dilaksanakan selepas menerima nilai atribut input buat kali pertama, di mana operasi yang diminta boleh dilakukan.
<app-child name="张三"></app-child>3), ngAfterContentInit
export class ChildComponent implements OnInit { @Input("name") name: string = "" ngOnInit() { console.log(this.name) // "张三" } }
dipanggil selepas pemaparan awal unjuran kandungan selesai.
<app-child> <div #box>Hello Angular</div> </app-child>4), ngAfterViewInit
export class ChildComponent implements AfterContentInit { @ContentChild("box") box: ElementRef<HTMLDivElement> | undefined ngAfterContentInit() { console.log(this.box) // <div>Hello Angular</div> } }
dipanggil apabila paparan komponen dipaparkan.
<!-- app-child 组件模板 --> <p #p>app-child works</p>
export class ChildComponent implements AfterViewInit { @ViewChild("p") p: ElementRef<HTMLParagraphElement> | undefined ngAfterViewInit () { console.log(this.p) // <p>app-child works</p> } }
2. Fasa kemas kini1), ngOnChanges
<app-child [name]="name" [age]="age"></app-child> <button (click)="change()">change</button>
export class AppComponent { name: string = "张三"; age: number = 20 change() { this.name = "李四" this.age = 30 } }
export class ChildComponent implements OnChanges { @Input("name") name: string = "" @Input("age") age: number = 0 ngOnChanges(changes: SimpleChanges) { console.log("基本数据类型值变化可以被检测到") } }Perubahan jenis data rujukan
<app-child [person]="person"></app-child> <button (click)="change()">change</button>
export class AppComponent { person = { name: "张三", age: 20 } change() { this.person = { name: "李四", age: 30 } } }2), ngDoCheck: Terutamanya digunakan untuk penyahpepijatan, selagi atribut input berubah, sama ada jenis data asas, jenis data rujukan atau perubahan atribut dalam rujukan jenis data, ia akan dilaksanakan.
export class ChildComponent implements OnChanges { @Input("person") person = { name: "", age: 0 } ngOnChanges(changes: SimpleChanges) { console.log("对于引用数据类型, 只能检测到引用地址发生变化, 对象属性变化不能被检测到") } }
3), ngAfterContentChecked: Dilaksanakan selepas kemas kini unjuran kandungan selesai.
4), ngAfterViewChecked: Dilaksanakan selepas paparan komponen dikemas kini.
3. Fasa memunggah 1), ngOnDestroy
dipanggil sebelum komponen dimusnahkan, digunakan untuk operasi pembersihan .
Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:export class HomeComponent implements OnDestroy { ngOnDestroy() { console.log("组件被卸载") } }Video Pengaturcaraan
Atas ialah kandungan terperinci Pembelajaran sudut bercakap tentang komunikasi komponen dan kitaran hayat komponen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!