javascript Angular 2+：当父值改变时更新@Input 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49249548/
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
Angular 2+: Update @Input property when parent value changes
提问by user2385716
I have a parent and child component where the parent is passing an object to the child through the @Input decorator. The problem is the child gets the parent data only once, then after future changes to parent property that is passed to the child, the value is not being update.
我有一个父组件和子组件，其中父组件通过 @Input 装饰器将对象传递给子组件。问题是孩子只获取一次父数据，然后在将来更改传递给孩子的父属性后，该值不会被更新。
回答by WasiF
On parent component change, do change in child component too
在父组件更改时，也要更改子组件
Here is how you can do with OnChangesinterface which detects changes in the component
以下是如何使用OnChanges检测组件更改的界面
In parent.component.html
在 parent.component.html
<app-child [child_name]="name"></app-child>
In child.component
在 child.component
export class ChildComponent implements OnChanges {
@Input('child_name') name: string
text: string
constructor() { }
// on every change of @input 'name', this method will be triggered
ngOnChanges() {
this.text = 'Hi ' + this.name
}
}
DEMO
演示
回答by Suren Srapyan
The data will be updated when whole reference will be updated. If you just update some properties inside that object, it will not be triggered. You need to change the reference of the passed object.
当整个参考将被更新时，数据将被更新。如果您只是更新该对象内的某些属性，则不会触发它。您需要更改传递对象的引用。
Example
例子
<child [data]="myData"></child>
If you will update myData.name = "Test", it will not be triggered. You need to do something
如果您将更新myData.name = "Test"，则不会触发。你需要做点什么
this.myData = changedData;
A workaround can be using DoChecklifecycle hook and try to check the property change manually. But generally it is more handy to change the reference.
一种解决方法是使用DoCheck生命周期挂钩并尝试手动检查属性更改。但通常更改引用更方便。
回答by Pranay Rana
if you want to get update value from parent compoent than you need to add changeDetection: ChangeDetectionStrategy.OnPushin your child component
如果您想从父changeDetection: ChangeDetectionStrategy.OnPush组件获取更新值，则需要在子组件中添加
Note:OnPush works by comparing references of the inputs of the component
注意：OnPush 通过比较组件输入的引用来工作
@Component({
selector: 'abc',
templateUrl: 'component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class childComponent {
//below get updated value every time value changes in parent
@Input() inputFromParent: string;
}
in parent , use child component abc
在父组件中，使用子组件 abc
<abc [inputFromParent]="passdata"></abc>
in parent ts this.inputFromParent = newData;//done after first init
in parent ts this.inputFromParent = newData;//第一次初始化后完成
now if you change value of passdatathen it will change value in childcomponent property too.
现在，如果您更改的值，passdata那么它也会更改 childcomponent 属性中的值。
回答by T. Shashwat
your parent comp html looks like :
你的父组件 html 看起来像：
<div>
<span (click)="expandAllClient = true "> EXPAND </span>
<span (click)="expandAllClient = false"> COLLAPSE </span>
</div>
<div>
<child-comp [expandAll]="expandAllClient"(flagChanged)="flagChanged($event)"></child-comp>
</div>
and dont forget to add :
并且不要忘记添加：
@Input() expandAll: boolean = false; in your ts file
and in child comp you can directly use expandall(here) in all your operation like:
在 child comp 中，您可以在所有操作中直接使用 expandall(here)，例如：
<div [ngClass]="{'openPanel': expandAll}></div>
here openpanel class will get applied if you have clicked EXPAND span in parent component
如果您在父组件中单击了 EXPAND 跨度，这里将应用 openpanel 类
回答by Mohammad Hassani
Try to get the changes by ngOnChanges
尝试通过 ngOnChanges 获取更改
use it in the child component
在子组件中使用它
ngOnChanges(changes: import("@angular/core").SimpleChanges): void {
}
回答by Jamshed
you should read about change detection.
您应该阅读有关更改检测的信息。
if you want to change data from parent component and others use serviceor ngrx-storealso you can use redux
如果你想从父组件更改数据，其他人使用service或ngrx-store也可以使用 redux
