angular學習之聊聊元件通訊與元件生命週期

這篇文章帶大家了解一下angular中的元件通訊和元件生命週期，簡單介紹一下向元件內部傳遞資料、元件向外部傳遞資料的方法，希望對大家有幫助！

元件通訊

---

#1、傳遞資料

##

<app-favorite [isFavorite]="true"></app-favorite>

// favorite.component.ts
import { Input } from '@angular/core';
export class FavoriteComponent {
    @Input() isFavorite: boolean = false;
}

【相關教學推薦：《

---

angular教學

》】
注意：在屬性的外面加上

[]

表示綁定動態值，在元件內接收後是布林類型，不加[] 表示綁定普通值，在元件內接收後是字串類型。

<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

Angular 在實例化元件類別時執行, 可以用來接收 Angular 注入的服務實例物件。

• 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("对于引用数据类型, 只能检测到引用地址发生变化, 对象属性变化不能被检测到")
  }
}

###2）、 ngDoCheck：主要用於調試，只要輸入屬性發生變化，不論是基本資料型別還是引用資料型別還是引用資料型別中的屬性變化，都會執行。 ######3）、ngAfterContentChecked：內容投影更新完成後執行。 ######4）、ngAfterViewChecked：元件視圖更新完成後執行。 ############3、卸載階段############1）、ngOnDestroy######當元件被銷毀之前呼叫, 用於清理作業。 ###

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

###更多程式相關知識，請造訪：###程式設計影片###！ ！ ###

以上是angular學習之聊聊元件通訊與元件生命週期的詳細內容。更多資訊請關注PHP中文網其他相關文章！