[英]ngOnChange is not called when the parent updates the child
我想知道 ngOnChanges 回調是如何工作的。 所以我添加了它來觀察使用 Input 裝飾器注釋的屬性的變化,如下所示:
@Input() postsToAddToList: Post[] = [];
現在,當我編譯代碼時,我添加了一些值,這些值會導致使用@Input 注釋的屬性發生更改,但這不會導致調用和執行 ngOnChanges 回調。 請參閱下面發布的屏幕截圖中顯示的日志。
我想查看瀏覽器中顯示的 ngOnChanges 中的日志。 請讓我知道是什么阻止了正確調用和調用 ngOnChanges
app.component.ts :
import { Component } from '@angular/core';
import { Post } from './post-create/post-create.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'binding2';
postsArray: Post[] = [];
onReceiveSubmittedEvtEmitter(post: Post) {
this.postsArray.push(post);
console.log("onReceiveSubmittedEvtEmitter->: post.title: " + post.title);
console.log("onReceiveSubmittedEvtEmitter->: post.content:" + post.content);
}
}
app.component.html :
<app-post-create (onPostSubmittedEvtEmitter)="onReceiveSubmittedEvtEmitter($event)"></app-post-create>
<app-post-list [postsToAddToList]="postsArray"></app-post-list>
post-list.component.ts :
import { Component, Input,OnInit, OnChanges, SimpleChanges,Output, EventEmitter } from '@angular/core';
import { Post } from '../post-create/post-create.component';
@Component({
selector: 'app-post-list',
templateUrl: './post-list.component.html',
styleUrls: ['./post-list.component.css']
})
export class PostListComponent implements OnInit {
constructor() {}
@Input() postsToAddToList: Post[] = [];
ngOnInit(): void {}
ngOnChanges(changes: SimpleChanges) {
for (let changedProperty in changes) {
if (changes.hasOwnProperty(changedProperty)) {
console.log("ngOnChanges->: changedProperty: " + changedProperty);
console.log("ngOnChanges->: changedProperty:" + changedProperty);
switch(changedProperty) {
case 'postsToAddToList':
console.log("ngOnChanges->: changes[changedProperty].previousValue: " + changes[changedProperty].previousValue);
console.log("ngOnChanges->: changes[changedProperty].currentValue):" + changes[changedProperty].currentValue);
break;
}
}
}
}
}
post-list.component.html :
<!-- post-list.component.html -->
<h3>List</h3>
<ng-container *ngIf="postsToAddToList.length; else elseTemplate">
<ul class="list-group">
<li class="list-group-item" *ngFor="let post of postsToAddToList; let i = index">
<h5>{{i+1}}) {{post.title}}</h5>
<p>
{{post.content}}
</p>
</li>
</ul>
</ng-container>
<ng-template #elseTemplate>
<div class="alert alert-danger" role="alert">
No Post Found!
</div>
</ng-template>
錯誤截圖:
由於您在父組件中使用push()
,因此不會在子組件中調用ngOnChanges
。 每次發生變化時,您都可postsToAddToList
重新分配值,而不是使用push()
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.