Given the following components:
@Component({
selector: 'compA',
template: template: `<compB [item]=item></compB>`
})
export class CompA {
item:any;
updateItem():void {
item[name] = "updated name";
}
}
@Component({
selector: 'compB',
template: template: `<p>{{item[name]}}</p>`
})
export class CompB implements OnInit{
@Input() item: any;
someArray: any[];
ngOnInit():void {
someArray.push("something");
}
}
As far as I understood that unless the complete item
object is changed, angular2 does not recognize the changes on item
. Therefore, I'd like to emit a change event manually for item
when the updateItem
method is called. And afterwards, make the child component i.e. CompB
re-rendered as if angular detected a change in the regular way.
Currently, what I have done is to implement the ngOnInit
method of for CompB
and call that method inside updateItem
method through a ViewChild
link. Another part of the story is that my actual source has objects like someArray
which I'd like to be reset in each render. I'm not sure re-rendering resets someArray
though. Currently, I'm resetting them in the ngOnInit
method.
So, my question is: how do I trigger re-rendering for changes on deeper elements of a parent object?
Thanks
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…