Angular2未检测变化对象值

Question

基本上，我有父组件我有一个对象

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

我然后有一个日期选择器组件，它我通过data.startDate

然而当日期上的两个部件选择器组件更改它不会反映到父组件对象中的值。

但是，如果我通过data这个整个对象，然后更新子组件中的值data.startDate，这将得到反映在父级。理想情况下，我不想使用订阅和发布事件，因为我想保持日期选择器代码非常通用，以便在应用程序中重用。

任何想法？

家长参考 <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（object）和IterableDiffer（array）类。

参见相应的代码：

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

编辑

如果你想利用双向绑定你的DateTimeComponent，你需要使用一个@Output ：

@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>