javascript - 更改属性时重新渲染 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;
  }
}

因此，当单击按钮时，我想重新渲染组件，以便在底层组件上填充新值。我也尝试过双向绑定(bind)，但在这种情况下没有多大意义，因为它是单向绑定(bind)。那么问题是如何触发更新？

谢谢!

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 .