プロパティが変更されたときにRebuild/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チームは考えなければならない。この

Answer 1

myAttrがあなたのサブコンポーネントで更新されたときは、検出する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; 
    } 
} 

更新し、それに応じてmyAttr1を更新します。

このplunkr：https://plnkr.co/edit/2SOdq7w3s8iDxBKbiLpU?p=previewを参照してください。