javascript - Re-render Angular2 component when property is changed - Stack Overflow

admin管理员组

文章数量:1324426

Lets say I have the following scenario:

@Component({
  selector: 'my-app',
  template: `
      <my-ponent
          [myAttr]="myAttr"
      ></my-ponent>
      <button (click)="onClick()">Click</button>
  `,
  directives: [MyComponent]
  })
  class AppComponent {
     myAttr: number = 1;

  onClick() {
      this.myAttr += 1;
  }
}

so when the button is clicked I want to rerender the ponent so the new value is populated on the underlying ponents. I have tried the two way binding as well, but does not make much sense in this case as it is a one way binding. So the question is how do I trigger update?

Thanks!

Lets say I have the following scenario:

@Component({
  selector: 'my-app',
  template: `
      <my-ponent
          [myAttr]="myAttr"
      ></my-ponent>
      <button (click)="onClick()">Click</button>
  `,
  directives: [MyComponent]
  })
  class AppComponent {
     myAttr: number = 1;

  onClick() {
      this.myAttr += 1;
  }
}

so when the button is clicked I want to rerender the ponent so the new value is populated on the underlying ponents. I have tried the two way binding as well, but does not make much sense in this case as it is a one way binding. So the question is how do I trigger update?

Thanks!

• javascript
• angular

Share Improve this question Follow edited Mar 22, 2016 at 12:34 Bas van Dijk 10.7k1010 gold badges5959 silver badges9595 bronze badges asked Mar 16, 2016 at 13:49 Bryant11Bryant11 33322 gold badges33 silver badges1010 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

In fact, the value is automatically updated into your sub ponent if you use interpolation (like you do) with an input and when updated in the parent ponent.

Here is the way to define the sub ponent:

import {Component,Input} from 'angular2/core';

@Component({
  selector: 'my-ponent',
  template: `
    <div>{{myAttr}}</div>
  `
})
export class MyComponent {
  @Input()
  myAttr: number;

}

See this plunkr: https://plnkr.co/edit/ka9fd9?p=preview.

You don't need to trigger anything. The update happens automatically because of the way Angular change detection works.

Angular monkey-patches all asynchronous events that are defined within the Angular "zone" (such as your (click) event binding), so after your onClick() event handler finishes, Angular will automatically run change detection.

Change detection will notice that myAttr is bound to an input property of MyComponent and it will automatically propagate the new value to the child ponent. Change detection will also notice (if we use Thierry's example) that property myAttr is bound to a div and it will automatically propagate the new value to the div's textContent property. Angular change detection finishes, then the browser notices the DOM change and updates what you see on the screen.

You are right about this, however there is one more thing - which event should be used to detect this change in the child ponent to perform certain logic. I can see that the ngAfterContentCheck event is fired for example, however it fires multiple times and I cannot seem to figure out the reason.

And one more thing - can I push update from the child ponent. So for example the my-app ponent that controls the myAttr will be updated when something changes in the child ponent (from user input or something like that). I am thinking React way here, so I am not sure this is the right approach.

本文标签： javascriptRerender Angular2 component when property is changedStack Overflow