關於父元件和子元件傳遞運作問題,想請教該去了解那部份機制內容,感謝!

子:
@Component({
selector: ‘app-child’,
templateUrl: ‘./child.component.html’,
styleUrls: [’./child.component.scss’],
})
export class childComponent implements OnInit {
@Input() Title: string;
@Input() MyEmp: EmpInfo[];
}

父:
parent.html
<div class=“col-sm-6” *ngIf=“MyInfo”>
<app-child [MyEmp]=“MyInfo” [Title]=“MyTitle”>

parent.ts
public myInfo: EmpInfo[];
ngOnInit() {
this.empservice.getEmp().subscribe((data) => {
this.MyInfo = data;
this.MyTitle = ‘TEST!’;
}
}

說明:
一開始並沒有在父的html中加上ngIf="MyInfo"這個判斷,Debug Trace時,發現會先跑至子的ts內執行,後面才跑父的ngOnInit(),這時才從httpclient取得myInfo的資料。結果就是子元件內MyTitle可以收到字串資料並正常顯示,可是MyInfo卻是沒有。一開始以為是接收後class array型態轉換等問題造成,可是試不出來問題在那邊。
後來想到會不會是處理順序機制造成,所以在div加上
ngIf=“MyInfo”,就正常了。

問題:
因為就是利用一些時間邊土法煉鋼學習,雖然目前可以正常運作。可是想請教前輩,像這個問題我應該找那部份關鍵詞去了解相關運作和機制,感謝!

父項=> 可改成

parent.html
<div class=“col-sm-6”>
<app-child [MyEmp]=“myInfo | async” [Title]=“MyTitle”>

parent.ts
public myInfo = this.empservice.getEmp();
MyTitle = ‘TEST!’;

ngOnInit() {

}

subscribe的結果已經是非同步向遠端要資料了。Component的生命週期可參考https://angular.tw/guide/lifecycle-hooks

1個讚

感謝回覆!主要是我子元件是要依父傳入資料動態顯示資料報表,所以不在子元件呼叫。
主要疑問的點是我在父元件中有assign 子元件的@input參數,為何這部份不會再次更新異動至子元件!
我會再多看生命週期這部份資訊,再次感謝!

使用 https://stackblitz.com/ 建立一個簡單的範例程式來問問題,可以更精準清晰的讓其他人知道你想要詢問的問題在哪裡