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（对象）和IterableDiffer（数组）类。

参见相应的代码：

修改

如果您想为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>

Angular2没有检测到对象值的变化

1 个答案: