[英]Angular Observable Get updated changed object from a parent to child component
I got an Angular parent component that use to pass a object to the child like the following我有一个 Angular 父组件,用于将对象传递给子组件,如下所示
export class ParentComponent implements OnInit {
viewModel = {} as MyViewModel;
constructor(private service: MyService) {}
ngOnInit() {
this.service.subscribe((data) => {
this.viewModel = data.fdForms.viewModel;
});
}
I pass the populated viewModel object to the component thru the html我通过 html 将填充的 viewModel 对象传递给组件
<app-table [viewModel]="viewModel"></app-table>
In my child component, it is passed with @Input()在我的子组件中,它通过 @Input() 传递
export class TableComponent implements OnInit {
@Input() viewModel = {} as any;
constructor() { }
ngOnInit(): void {
console.log(this.viewModel); // this stays null even when parent is updated
}
}
After testing, the parent component get the updated data when it changes but the child component is not passed the updated object.经测试,父组件改变时获取更新的数据,但子组件没有传递更新的对象。
After googling, I think I need to change the code to make the child component subscribe to the parent viewModel object property.谷歌搜索后,我想我需要更改代码以使子组件订阅父viewModel对象属性。
UPDATE: trying OnChanges but getting error更新:尝试 OnChanges 但出现错误
export class TableComponent implements OnChanges {
@Input() viewModel = {} as any;
constructor() { }
ngOnChanges(changes: SimpleChange) : void {
console.log(this.viewModel); // this stays null even when parent is updated
}
}
But I am getting this error.但我收到此错误。 I check other post on OnChanges, can't tell what is the error
我查看了 OnChanges 上的其他帖子,不知道是什么错误
Error TS2416: Property 'ngOnChanges' in type 'TableComponent' is not assignable to the same property in base type 'OnChanges'.
Type '(changes: SimpleChange) => void' is not assignable to type '(changes: SimpleChanges) => void'.
Types of parameters 'changes' and 'changes' are incompatible.
Type 'SimpleChanges' is missing the following properties from type 'SimpleChange': previousValue, currentValue, firstChange, isFirstChange
28 ngOnChanges(changes: SimpleChange) {
Thanks for any help from a newbie.感谢新手的任何帮助。
ngOnInit
gets executed when a Component is created. ngOnInit
在创建组件时执行。 So, in this case, it may well be that when the Child component is created the service
of the Parent has not yet notified any value and therefore nothing is printed on the console.因此,在这种情况下,很可能在创建 Child 组件时 Parent 的
service
尚未通知任何值,因此控制台上没有打印任何内容。
So you have some different strategies to overcome this problem.所以你有一些不同的策略来克服这个问题。
One is to pass service
via dependency injection to the Child and then subscribe
to it in the ngOnInit
of the Child component.一种是通过依赖注入将
service
传递给Child,然后在Child组件的ngOnInit
中subscribe
。
But probably you should look at the way you use viewModel
in Child.但也许你应该看看你在 Child 中使用
viewModel
的方式。 If you reference it in the template you should be able to see changes when they happen.如果您在模板中引用它,您应该能够在更改发生时看到它们。
Another trick to check if the new value is actually passed, you can use getter/setter for the viewModel
property like this.检查新值是否实际传递的另一个技巧,您可以像这样对
viewModel
属性使用 getter/setter。
_viewModel: any;
get viewModel() {
return this._viewModel;
}
@Input() set viewModel(value: any) {
this._viewModel = value;
console.log(this._viewModel); // this should print something when new data is received
}
If anyone else is stuck on Observable from parent to child, this following simple changes worked for me如果其他人从父母到孩子都被困在 Observable 上,以下简单的更改对我有用
ngOnChanges(changes: SimpleChanges): void {} ngOnChanges(changes: SimpleChanges): void {}
Added this in my child component and when the parent subscribed and got the updated changes, that triggered the child to get the updated data.在我的子组件中添加了这个,当父组件订阅并获得更新的更改时,会触发子组件获取更新的数据。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.