javascript 当父数据更改 Angular 4 时，如何强制子组件重新加载其数据及其视图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48486581/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to force child component to reload its data and its view when parent data changes Angular 4
提问by Joshua Majebi
I am using angular 4. I am a bit new to it although i had used Angular JS.
我正在使用 angular 4。虽然我使用过 Angular JS，但我对它有点陌生。
I have a parent component which has an array of objects
我有一个父组件，它有一个对象数组
people: Person[]; //array of Person model
And in the parent component the user modifies people array through its view
在父组件中，用户通过其视图修改 people 数组
Now there is a child component(personComponent) in the parent components view that iterates through the people array like so
现在父组件视图中有一个子组件（personComponent），它像这样遍历 people 数组
<person *ngFor="let person of people; let i = index" [person]="person">
The child component shows percentges of each person in the personComponent
子组件显示了 personComponent 中每个人的百分比
@Input() person:Person; //person model
percent:number;
ngOnInit(){
this.percent = this.person.percent;
}
Now in the parent component, when a new person is added to the people array, each child component is supposed to have a new percent.
现在在父组件中，当一个新人被添加到 people 数组时，每个子组件都应该有一个新的百分比。
So i created a method in the parent component that calculates the percent of each person
所以我在父组件中创建了一个方法来计算每个人的百分比
setPercent(){
this.people.forEach((p)=>{
p.percent = Math.round((p.value/this.total_amount)*100) //total amount is a variable in the parent component
})
}
Now every time a new person is added the setPerson method is called...the problem is that the child component does not update its data and the percent of each person in the people array is not updated.
现在，每次添加一个新人时，都会调用 setPerson 方法……问题是子组件不会更新其数据，并且不会更新 people 数组中每个人的百分比。
I have tried using ngOnChanges on the child components person variable but that did not update the child components data and hence the child components view did not change as well. What can i do pls.
我曾尝试在子组件 person 变量上使用 ngOnChanges，但这并没有更新子组件数据，因此子组件视图也没有改变。请问我能做什么。
采纳答案by Justinas Simanavicius
In your Personcomponent, you take the percentage value on initialization and no longer update it. Instead of doing that, you could use the personproperty, that has the always up to date value. So you should be able to use it as
在您的Person组件中，您在初始化时采用百分比值并且不再更新它。您可以使用person具有始终最新值的属性，而不是这样做。所以你应该可以将它用作
{{person.percentage}}
in your template.
在您的模板中。
回答by Nour
On your child component use the following:
在您的子组件上使用以下内容：
import { ChangeDetectionStrategy } from '@angular/core';
@Component({
// your selector and template
changeDetection: ChangeDetectionStrategy.OnPush
})
and in your parent component try the following:
并在您的父组件中尝试以下操作：
import {ChangeDetectionRef} from '@angular/core';
and Inject it in the constructor:
并在构造函数中注入它：
constructor(private cd:ChangeDetectorRef){}
and in your method that update the percentages:
并在您更新百分比的方法中：
setPercent(){
this.people.forEach((p)=>{
p.percent = Math.round((p.value/this.total_amount)*100) //total amount is a
variable in the parent component
});
// TRY THIS
this.cd.detectChanges();
// OR THIS
this.cd.markForCheck();
}
This code will tell the change detection to check of changes on your component and it's children.
此代码将告诉更改检测检查您的组件及其子组件上的更改。
回答by Mark
You can use the onChanges lifecycle hook.
您可以使用 onChanges 生命周期挂钩。
// Child component
// 子组件
import { Component, OnChanges, SimpleChanges } from '@angular/core';
ngOnChanges(changes: SimpleChanges) {
if (changes['person']) {
console.log(changes['person'].currentValue);
}
}
