觸發條件：

• 父組件使子組件輸入屬性值變化時才會調用，子組件自己改變輸入屬性的值不會調用
• @input屬性(輸入屬性)發生變化時，會調用
• 當輸入屬性為對象時，當對象的屬性值發生變化時，不會調用
• 當對象的引用變化時會觸發

父組件

//app.component.html <app-child [greeting]="greeting" [user]="user"></app-child><p> 問候語：<input type="text" [(ngModel)]="greeting"></p> <p>姓名：<input type="text" [(ngModel)]="user.name"></p> <button (click)="changeUser()">change</button>//app.component.ts import { Component } from '@angular/core';@Component({selector: 'app-root',templateUrl: './app.component.html' }) export class AppComponent {public greeting: string = 'Hello';public user: { name: string } = { name: 'Tom' };//改變user的引用地址public changeUser():void{this.user = {name:'jq'}} }

子組件

//child.component.tsimport { Component, Input, OnChanges, SimpleChanges } from '@angular/core';@Component({selector: 'app-child',templateUrl: './child.component.html' }) export class ChildComponent implements OnChanges {@Input() greeting: string;@Input() user: { name: string };ngOnChanges(changes: SimpleChanges): void {console.log(changes);}

改變問候語為Hello1會觸發ngOnChanges：

改變姓名不會觸發ngOnChanges

點擊change按鈕點擊，觸發changeUser方法改變user的引用地址，會觸發ngOnChanges:

總結

以上是生活随笔為你收集整理的angular生命周期钩子ngOnChanges-父组件使子组件输入属性值变化时触发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。