這篇文章帶大家了解一下angular中的元件通訊和元件生命週期，簡單介紹一下向元件內部傳遞資料、元件向外部傳遞資料的方法，希望對大家有幫助！
#1、傳遞資料
<app-favorite [isFavorite]="true"></app-favorite>
// favorite.component.ts
import { Input } from '@angular/core';
export class FavoriteComponent {
@Input() isFavorite: boolean = false;
}》】
注意：在屬性的外面加上
表示綁定動態值，在元件內接收後是布林類型，不加[] 表示綁定普通值，在元件內接收後是字串類型。
<app-favorite [is-Favorite]="true"></app-favorite>
import { Input } from '@angular/core';
export class FavoriteComponent {
@Input("is-Favorite") isFavorite: boolean = false
}2、元件向外部傳遞資料
需求：在子元件中透過點擊按鈕將資料傳遞給父元件
<!-- 子组件模板 --> <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)
}
}#1、掛載階段
1）、constructor
export class ChildComponent {
constructor (private test: TestService) {
console.log(this.test) // "test"
}
}2）、ngOnInit
<app-child name="张三"></app-child>
export class ChildComponent implements OnInit {
@Input("name") name: string = ""
ngOnInit() {
console.log(this.name) // "张三"
}
}3）、ngAfterContentInit當內容投影初始渲染完成後呼叫。
<app-child> <div #box>Hello Angular</div> </app-child>
export class ChildComponent implements AfterContentInit {
@ContentChild("box") box: ElementRef<HTMLDivElement> | undefined
ngAfterContentInit() {
console.log(this.box) // <div>Hello Angular</div>
}
}4）、ngAfterViewInit當元件視圖渲染完成後呼叫。
<!-- 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、更新階段
1）、ngOnChanges當輸入屬性值發生變化時執行，初始設定時也會執行一次，順序優於ngOnInit
不論多少輸入屬性同時變化，鉤子函數只會執行一次，變化的值會同時儲存在參數中
參數類型為SimpleChanges，子屬性類型為SimpleChange
#########對於基本資料型別來說, 只要值變更就可以被偵測到############對於引用資料型別來說, 可以偵測從一個物件變成另一個物件, 但是偵測不到同一個物件中屬性值的變化，但是不影響元件範本更新數據。 ###############基本資料型別值變化######<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("基本数据类型值变化可以被检测到")
}
}<app-child [person]="person"></app-child> <button (click)="change()">change</button>
export class AppComponent {
person = { name: "张三", age: 20 }
change() {
this.person = { name: "李四", age: 30 }
}
}export class ChildComponent implements OnChanges {
@Input("person") person = { name: "", age: 0 }
ngOnChanges(changes: SimpleChanges) {
console.log("对于引用数据类型, 只能检测到引用地址发生变化, 对象属性变化不能被检测到")
}
}export class HomeComponent implements OnDestroy {
ngOnDestroy() {
console.log("组件被卸载")
}
}以上是angular學習之聊聊元件通訊與元件生命週期的詳細內容。更多資訊請關注PHP中文網其他相關文章！
