ngOnchanges и DoCheck в angular

Изучая разницу между ngOnChanges и DoCheck в Angular, я вижу кое-что, что не могу объяснить, и мне нужна ваша помощь.

В принципе, я понимаю, что ngOnChanges не может распознать изменение массива или объекта, а DoCheck может. Я создал stackblitz здесь: https://stackblitz.com/edit/angular-ivy-sbyzya?file=src/app/app.component.html

В app.component.html

  • Если вы прокомментируете строку 2, то есть только компонент, который запускает ngOnChanges, данные не сортируются при нажатии кнопки добавления или редактирования. Это правильно, потому что OnChange не может обнаружить изменение массива @Input.
<data-table-onchange [data]="numbers"></data-table-onchange>
<!-- <data-table-docheck [data]="numbers"></data-table-docheck> -->
  • Если вы закомментируете строку 1, то только компонент, который запускает DoCheck, данные сортируются при нажатии кнопки добавления или редактирования. Это правильно, потому что DoCheck может обнаружить изменение массива @Input.
<!--<data-table-onchange [data]="numbers"></data-table-onchange> -->
 <data-table-docheck [data]="numbers"></data-table-docheck>
  • Но если вы разрешите запускать оба дочерних компонента, при нажатии кнопки добавления или редактирования данные в обоих дочерних компонентах будут отсортированы. Мне это кажется странным, потому что я не понимаю, почему DataTableOnchangeComponent может запускать функцию сортировки. Я поставил сортировку в ngOnChanges, ngOnChanges не запускался при нажатии кнопки добавления или редактирования, но каким-то образом данные все равно сортируются.
<data-table-onchange [data]="numbers"></data-table-onchange>
<data-table-docheck [data]="numbers"></data-table-docheck>

angular ngonchanges angular-lifecycle-hooks angular2-docheck
person Luke    schedule 14.05.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Причина, по которой обе таблицы сортируют числа, когда вы раскомментируете обе строки, заключается в том, что, когда DoCheck инициирует сортировку, массив чисел фактически сортируется, и это тот же массив < / strong>, который присутствует в обоих компонентах. Передача по ссылке Javascript в игре.

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

<data-table-onchange [data]="numbers"></data-table-onchange>
<data-table-docheck [data]="numbers2"></data-table-docheck>

in TS

public numbers: number[] = [5, 69, 9];
public numbers2: number[] = [5, 69, 9];

public add(): void {
  const random: number = Math.floor(Math.random() * 100);
  this.numbers.push(random);
  this.numbers2.push(random);
}
person Nayak    schedule 14.05.2020
comment
Спасибо, совсем забыл про пропуск по ссылке: D - person Luke; 14.05.2020