anguar @input绑定的属性变化
Intercept @Input property change in Angular
this post is good for Angular 2+
In Angular, for a child component to allow its parent component to pass on some data to it, it needs to provide a binding input property to which the parent component can bind its data to. The child component specifies such binding property by decorating it with @Input()
attribute.
For example sake, consider an order-processing application that an store associate would use to process orders received.
👆 we have a child component item-details
that specifies two properties - item
and notifyItemProcessed
,(line#9–10), as @Input()
properties. This would allow a parent component order
to pass on an order item and a reference to a parent’s method that the child component should call when an item has been processed, like below :
👆the parent component order
assigns its itemSelected
property to the child component’s input property item
(line# 13) and thus the child component gets a reference to the currently selected item in parent component via its item
property.
Similarly, the parent component is also passing a reference to the method that the child component should call when the selected item is processed via the child component’s input property notifyItemProcessed
(line#14).
Now, lets say, the child component wants to set the status of the item
(passed to it from parent component ) to ‘In Process’ whenever the item selected for processing in the parent component changes. Additionally the child component may also want to reset its internal properties suppliedQuantity
, scannedUPC
and errors
whenever a new item
is passed to it. For this, the child component need to know when the value of its input property item
changes.
Child component has two options to intercept the change to its input properties: 1. Using the typescript’s class member accessors(getter/setter) to define the input property item
or 2. Using the angular component’s ngOnChanges
event.
1. Using Typescript Accessors (getter/setter)
In the child component class, we can define our @Input property item
using typescript accessors that would allow us to intercept whenever the property is set to a new value, like shown below:
👆 line#12 -22, we defined the item
property using typescript accessors. In the setter of the property (line#16–22), we intercept the new value and set its status to ‘In Process’.
Note that we added a new private member _item
inside our class to store the value of the property which is accessed using the getter/setter we defined. But the public @Input property being same i.e. item
the parent component would continue to bind data to it in the same way as we did above:
<item-details *ngIf="itemSelected"
[item]="itemSelected"
[notifyItemProcessed]="processOrderItems" ></item-details>
2. Using ngOnChanges
event
Another option to intercept for any change in any of the input property is to use the Angular’s ngOnChanges
event:
👆 Line# 30–38, we are using ngOnChanges
event to intercept any change in the input properties. Note that this event will be triggered when any of the input bound properties change. The ngOnChanges event method would receive an object of type SimpleChanges
object that would give us each of the property that has changed as SimpleChange
object containing the property’s previousValue
and CurrentValue
. The SimpleChange
object also provides isFirstChange()
function that can be used to verify if its the first time the property value has changed.
Here is the plunkr example of the above two approaches:
So, which one is to use of the two options? Cannot say one should be preferred over other. Both options work good. I found that with Typescript Accessor, I was required to use ChangeDetectorRef.detectChanges()
to trigger the change if I use the property in some Angular expression on the template. With ngOnChanges
it was handled by Angular. So I guess I would use ngOnChanges
mostly because its more Angular in-built
, but the Typescript Accessor approach would be useful when there is some customization need to be done to the property value when its being read(get).