Привязка свойства Angular 2 неожиданно сработала - PullRequest
Новая
       18

Привязка свойства Angular 2 неожиданно сработала

0 голосов
/ 03 апреля 2019

У меня есть компонент для редактирования диапазонов дат (даты вступления в силу и истечения срока действия).Когда какая-либо из дат изменяется, она генерирует новый диапазон дат.Однако после эмиссии вызывается @Input() set dateRange(...).Это ожидаемое поведение?Если так, то зачем родительскому компоненту устанавливать свойство связанного дочернего компонента, когда он просто получает новое значение от дочернего? 

export class EditDateRange {
  effectiveDate?: Date;
  expireDate?: Date;

  @Output() dateRangeChange = new EventEmitter<DateRange>();

  @Input()
  get dateRange(): DateRange {
    return new DateRange({
      effectiveDate: this.effectiveDate,
      expireDate: this.expireDate,
    });
  }

  // Gets called when dateRangeChange emitts an event
  set dateRange(dateRange: DateRange) {
    if (dateRange.hasEffectiveDate) {...}
    if (dateRange.hasExpireDate) {...}
  }

  dateRangeChanged() {
    this.dateRangeChange.emit(this.dateRange);
  }
}

Тогда в родительском HTML 

<div>
    ...
    <edit-date-range [(dateRange)]="dateRange" 
                     (dateRangeChange)="validateDateRange($event)">
    </edit-date-range>
</div>

Проблема (или, может быть, поведение) исчезает, когда я меняю [(dateRange)] на [dateRange].

Ответы [ 2 ]

0 голосов
/ 03 апреля 2019

Из банана ngModel в документации к коробке :

Синтаксис [(x)] легко продемонстрировать, когда элемент имеет настраиваемое свойство, называемое x, и соответствующее событие.названный xChange.<app-sizer [(size)]="fontSizePx"></app-sizer>

И далее вниз:

Синтаксис двусторонней привязки на самом деле является просто синтаксическим сахаром для привязки свойства и привязки события.Angular отлаживает привязку SizerComponent к этому: <app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>

При этом использование двухсторонней привязки, а также привязки события изменения приведет к тому, что изменение будет инициировано дважды.

0 голосов
/ 03 апреля 2019

[(dateRange)] будет двухсторонней привязкой и уже будет хуком жизненного цикла для обнаружения изменений, поэтому он ведет себя как ожидалось.[dateRange] был бы односторонним связыванием и больше не действует как хук жизненного цикла.Вместо того, чтобы вручную обрабатывать передачу события, я бы использовал ngOnChanges , чтобы использовать хук жизненного цикла, уже находящийся в игре.

...