当属性改变时，重新构建/重新渲染Angular2组件

Question

如何实现这个功能？

我的子组件

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

@Component({
selector: 'my-component',
template: `
    <div>In child component - myAttr = {{ myAttr1 }}</div>
`
})
export class MyComponent  {
  @Input() myAttr: number;
  myAttr1:number;
 ngOnInit()
 {
  this.myAttr1=this.myAttr*10;
 }

}

主要组件

import {Component} from 'angular2/core';
import {MyComponent} from './sub.component';

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

  onClick() {
    console.log('Click in the parent component');
    this.myAttr += 1;
  }
}

我需要在每次点击时更新值。应该有一种直接的方法，否则Angular2团队应该考虑这个问题。

- MAHESH VALIYA VEETIL

Answer 1

你应该使用ngOnChanges来检测在你的子组件中何时更新了myAttr:

@Component({
  selector: 'my-component',
  template: `
    <div>In child component - myAttr = {{ myAttr1 }}</div>
  `
})
export class MyComponent  {
  @Input() myAttr: number;
  myAttr1:number;
  ngOnInit() {
    this.myAttr1=this.myAttr*10;
  }

  ngOnChanges() { // <------
    this.myAttr1=this.myAttr*10;
  }
}

这可以检测到当myAttr输入属性被更新时，相应地更新myAttr1。

参见此plunkr：https://plnkr.co/edit/2SOdq7w3s8iDxBKbiLpU?p=preview。

- Thierry Templier

---

是的，我找到了。由于这只是一个简单的例子，我们可以实现它。 - MAHESH VALIYA VEETIL

属性是否有双向绑定选项？ - MAHESH VALIYA VEETIL

对于双向绑定，您需要添加一个带有前缀Change的名称的@Output。例如：@Output() myAttrChange:EventEmitter<number> = new EventEmitter();。您需要使用其emit方法触发事件。这使您可以使用以下语法：[(myAttr)]="myAttr"。 - Thierry Templier