Angular2は基本的価値

Question

をオブジェクトへの変更を検出しない、私は、私はdata.startDate

しかし通過日付ピッカーコンポーネントを有する

this.data = { startDate : '2016-01-01' }; 

オブジェクトを有する親コンポーネント日に二つの成分を有しますピッカーコンポーネントは、親コンポーネントオブジェクトに反映されない値を変更します。

しかし、このオブジェクト全体をdataに渡して、子コンポーネント内の値data.startDateを更新すると、これは親に反映されます。理想的には、日付ピッカーコードを非常に汎用的にしてアプリケーション全体に再利用したいので、購読とイベントを使用したくないのです。

アイデア？

親REF <date-time [dateTimeModel]="data.startDate"></date-time>

子クラス

@Component({ 
    moduleId: module.id, 
    selector: 'date-time', 
    templateUrl: './dateTime.component.html', 
    styleUrls: ['./dateTime.component.css'], 
    directives: [FORM_DIRECTIVES, CORE_DIRECTIVES], 
    providers: [] 
}) 
export class DateTimeComponent { 

    @Input() 
    dateTimeModel:any; 
    constructor() {} 

} 

子供テンプレート

<div class="dateTimeInput"> 
    <label htmlFor="date-1" >Date</label> 
    <input type="date" id="date-1" [(ngModel)]="dateTimeModel" /> 
</div> 

Answer 1

Angular2は、オブジェクトと属性の参照やないから更新を検知します。変更検出のデフォルトの動作です。

カスタム検出を提供する場合は、KeyValueDiffer（オブジェクト）クラスとIterableDiffer（配列）クラスを調べることができます。あなたは、双方向のバインディング活用したい場合は、あなたのDateTimeComponentあなたが@Outputを使用する必要が

• https://angular.io/docs/ts/latest/api/core/index/KeyValueDiffer-interface.html
• https://angular.io/docs/ts/latest/api/core/index/IterableDiffer-interface.html

編集

：

は、対応するコードを参照してください。 ：

0コンポーネントテンプレート内

@Component({ 
    moduleId: module.id, 
    selector: 'date-time', 
    templateUrl: './dateTime.component.html', 
    styleUrls: ['./dateTime.component.css'], 
    directives: [FORM_DIRECTIVES, CORE_DIRECTIVES], 
    providers: [] 
}) 
export class DateTimeComponent { 

    @Input() 
    dateTimeModel:any; 
    @Output() 
    dateTimeModelChange:EventEmitter<any> = new EventEmitter(); 

    constructor() {} 

    onDateUpdated(val) { 
    this.dateTimeModelChange.emit(val); 
    } 
} 

：親で

<div class="dateTimeInput"> 
    <label htmlFor="date-1" >Date</label> 
    <input type="date" id="date-1" [ngModel]="dateTimeModel" (ngModelChange)="onDateUpdated($event)" /> 
</div> 

、あなたはこのようにそれを使用することができます。

<date-time [(dateTimeModel)]="data.startDate"></date-time>