angular組件通訊和組件生命周期是什么

本文小編為大家詳細(xì)介紹“angular組件通訊和組件生命周期是什么”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“angular組件通訊和組件生命周期是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

成都創(chuàng)新互聯(lián)公司于2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元千陽(yáng)做網(wǎng)站,已為上家服務(wù),為千陽(yáng)各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

angular組件通訊和組件生命周期是什么

組件通訊

1、向組件內(nèi)部傳遞數(shù)據(jù)

<app-favorite [isFavorite]="true"></app-favorite>
// favorite.component.ts
import { Input } from '@angular/core';
export class FavoriteComponent {
    @Input() isFavorite: boolean = false;
}

注意：在屬性的外面加 [] 表示綁定動(dòng)態(tài)值，在組件內(nèi)接收后是布爾類型，不加 [] 表示綁定普通值，在組件內(nèi)接收后是字符串類型。

<app-favorite [is-Favorite]="true"></app-favorite>
import { Input } from '@angular/core';

export class FavoriteComponent {
  @Input("is-Favorite") isFavorite: boolean = false
}

2、組件向外部傳遞數(shù)據(jù)

需求：在子組件中通過(guò)點(diǎn)擊按鈕將數(shù)據(jù)傳遞給父組件

<!-- 子組件模板 -->
<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)
  }
}

組件生命周期

angular組件通訊和組件生命周期是什么

1、掛載階段

掛載階段的生命周期函數(shù)只在掛載階段執(zhí)行一次，數(shù)據(jù)更新時(shí)不再執(zhí)行。

1）、constructor

Angular 在實(shí)例化組件類時(shí)執(zhí)行, 可以用來(lái)接收 Angular 注入的服務(wù)實(shí)例對(duì)象。

export class ChildComponent {
  constructor (private test: TestService) {
    console.log(this.test) // "test"
  }
}

2）、ngOnInit

在首次接收到輸入屬性值后執(zhí)行，在此處可以執(zhí)行請(qǐng)求操作。

<app-child name="張三"></app-child>
export class ChildComponent implements OnInit {
  @Input("name") name: string = ""
  ngOnInit() {
    console.log(this.name) // "張三"
  }
}

3）、ngAfterContentInit

當(dāng)內(nèi)容投影初始渲染完成后調(diào)用。

<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

當(dāng)組件視圖渲染完成后調(diào)用。

<!-- 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

  • 當(dāng)輸入屬性值發(fā)生變化時(shí)執(zhí)行，初始設(shè)置時(shí)也會(huì)執(zhí)行一次，順序優(yōu)于 ngOnInit

  • 不論多少輸入屬性同時(shí)變化，鉤子函數(shù)只會(huì)執(zhí)行一次，變化的值會(huì)同時(shí)存儲(chǔ)在參數(shù)中

  • 參數(shù)類型為 SimpleChanges，子屬性類型為 SimpleChange

  • 對(duì)于基本數(shù)據(jù)類型來(lái)說(shuō), 只要值發(fā)生變化就可以被檢測(cè)到

  • 對(duì)于引用數(shù)據(jù)類型來(lái)說(shuō), 可以檢測(cè)從一個(gè)對(duì)象變成另一個(gè)對(duì)象, 但是檢測(cè)不到同一個(gè)對(duì)象中屬性值的變化，但是不影響組件模板更新數(shù)據(jù)。

基本數(shù)據(jù)類型值變化

<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("基本數(shù)據(jù)類型值變化可以被檢測(cè)到")
  }
}

引用數(shù)據(jù)類型變化

<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("對(duì)于引用數(shù)據(jù)類型, 只能檢測(cè)到引用地址發(fā)生變化, 對(duì)象屬性變化不能被檢測(cè)到")
  }
}

2）、ngDoCheck：主要用于調(diào)試，只要輸入屬性發(fā)生變化，不論是基本數(shù)據(jù)類型還是引用數(shù)據(jù)類型還是引用數(shù)據(jù)類型中的屬性變化，都會(huì)執(zhí)行。

3）、ngAfterContentChecked：內(nèi)容投影更新完成后執(zhí)行。

4）、ngAfterViewChecked：組件視圖更新完成后執(zhí)行。

3、卸載階段

1）、ngOnDestroy

當(dāng)組件被銷毀之前調(diào)用, 用于清理操作。

export class HomeComponent implements OnDestroy {
  ngOnDestroy() {
    console.log("組件被卸載")
  }
}

讀到這里，這篇“angular組件通訊和組件生命周期是什么”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文標(biāo)題：angular組件通訊和組件生命周期是什么
網(wǎng)頁(yè)地址：http://bm7419.com/article2/jdijoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、響應(yīng)式網(wǎng)站、網(wǎng)站維護(hù)、App開發(fā)、網(wǎng)頁(yè)設(shè)計(jì)公司、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作