更改屬性后重新渲染Angular2組件

Question

可以說我有以下情況：

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

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

因此，當單擊按鈕時，我想重新渲染組件，以便在基礎組件上填充新值。 我也嘗試了兩種方式的綁定，但是在這種情況下它沒有多大意義，因為它是一種單向綁定。 所以問題是如何觸發更新？

謝謝！

Answer 1

實際上，如果您對輸入使用插值（就像您一樣），並且在父組件中進行了更新，則該值會自動更新到您的子組件中。

這是定義子組件的方法：

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

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

}

請參閱以下代碼： https ://plnkr.co/edit/ka9fd9 ? p = preview。

Answer 2

您無需觸發任何操作。 由於Angular更改檢測的工作方式，更新自動發生。

Angular Monkey修補了在Angular“區域”中定義的所有異步事件（例如您的(click)事件綁定），因此在onClick()事件處理程序完成后，Angular將自動運行更改檢測。

更改檢測將注意到myAttr綁定到MyComponent的輸入屬性，它將自動將新值傳播到子組件。 更改檢測還將注意到（如果使用Thierry的示例）屬性myAttr已綁定到div ，它將自動將新值傳播到div的textContent屬性。 角度更改檢測完成，然后瀏覽器會注意到DOM更改並更新您在屏幕上看到的內容。

Answer 3

您對此是正確的，但是還有另外一件事-應該使用哪個事件來檢測子組件中的此更改以執行某些邏輯。 我可以看到例如觸發了ngAfterContentCheck事件，但是它多次觸發，我似乎無法弄清原因。

還有一件事-我可以從子組件中推送更新。 因此，例如，當子組件中的某些更改（來自用戶輸入或類似內容）發生變化時，控制myAttr的my-app組件將被更新。 我在這里考慮React的方式，所以我不確定這是正確的方法。