Angular2 не обнаруживает изменения значения объекта

По сути, у меня есть два компонента в родительском компоненте, у меня есть объект

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>

angular angular2-forms angular2-directives
person JohnC    schedule 20.07.2016    source источник
comment
Можете ли вы показать свой шаблон, в котором вы привязываете data.startDate?   -  person Arpit Agarwal    schedule 20.07.2016

Ответы (1)


arrow_upward
3
arrow_downward

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>
person Thierry Templier    schedule 20.07.2016
comment
Эх, надеялся, что это что-то попроще. Я посмотрю, я также обновил вопрос, добавив немного больше деталей. - person JohnC; 20.07.2016
comment
Я не правильно понял ваш вопрос. Я думаю, что вы могли бы попробовать двустороннюю привязку к вашему компоненту dateTime. Я обновил свой ответ соответственно... - person Thierry Templier; 20.07.2016