Как я могу передать одни и те же данные несколько раз от родителя к компоненту в Angular?

Question

У меня есть два компонента, которые взаимодействуют друг с другом, обычный компонент (родительский) и модальный компонент начальной загрузки (дочерний). И у родителя, и у ребенка есть таблица с записями. В таблице родителей каждая запись имеет флажок. Когда я выбираю один или несколько флажков и нажимаю на кнопку, запускается событие, которое пытается заполнить дочернюю таблицу.

Таблица ребенка заполняется, и у меня есть возможность удалить из нее нужные мне записи. Если я удаляю некоторые записи, закрываю модальное (закрывающее дочернее) и решаю снова отправить те же данные от родительского к дочернему, событие Input не вызывается. Однако, если я решу проверить разные записи в родительском и передать их дочернему элементу, событие Input будет запущено правильно.

Вот что у меня есть:

ParentComponent.component.html

<child-component #createNewProductRequestModal [data]="newProductRequest"></m-child-component>

ParentComponent.component.ts

private onNewProductRequest(toSend){
  this.newProductRequest = toSend;
  $('#createNewProductRequestModal').appendTo("body").modal('toggle');
}

ChildComponent.component.ts

@Input('data')
set data(data: any) {
  if (data !== undefined || data !== "") {
    this.products = data;
    console.log("data");
  }
}

constructor() { }

ngOnInit() { }

Чтобы проверить, изменились ли данные до того, как я отрисовываю дочернюю таблицу, я записываю данные, переданные родителем в консоль. С этим кодом каждый раз, когда я выполняю родительский onNewProductRequest(toSend) без изменения переменной toSend, дочерний модальный рендеринг, но не выполняет событие Input, следовательно, не изменяя данные.

Answer 1

Когда вы отправляете те же данные дочернему компоненту во второй раз, Angular не регистрирует это как изменение @Input (), так как вы передаете ту же ссылку Object, которую вы передали в первый раз, и Angularпросто сравнивая ссылки.

Попробуйте это небольшое изменение:

private onNewProductRequest(toSend){
  this.newProductRequest = { ...toSend };
  $('#createNewProductRequestModal').appendTo("body").modal('toggle');
}

Это будет означать, что вы передаете поверхностную копию объекта данных дочернему элементу, а не просто измененную версию исходного объекта.Поскольку эта мелкая копия будет иметь другую ссылку на исходный объект, Angular примет ее как изменение и вызовет ваш установщик @Input.

Answer 2

Вы можете использовать ngOnChanges

Определение из угловых документов

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

У вас есть входные данные для дочернего элемента

  @Input() nameOfInput: any;

Ваш дочерний компонент должен реализовать OnChanges вот так:

export class ChildComponent implements OnChanges {

И на следующем шаге вы хотите что-то делать при каждом изменении входов.

 ngOnChanges(changes: SimpleChanges) {
    console.log(changes);
    if ('nameOfInput' in changes) {
        console.log('Old value: ', changes.nameOfInput.previousValue);
        console.log('New value: ', changes.nameOfInput.currentValue);
    }
  }

Посмотрите на этот пример.

Пример

Answer 3

Когда вы присваиваете данные входу, в первый раз обнаруживаете изменения, потому что объект изменяется, но затем, если вы измените свойства внутри объекта, ссылка и объект останутся прежними, поэтому изменения не сработают. Решением является клонирование объекта, который вы отправляете через дочерний элемент. Попробуйте изменить эту строку:

this.newProductRequest = toSend;

Для этого:

this.newProductRequest = {...toSend};

Answer 4

1001 * попробовать *

в дочернем компоненте

import {Component, OnChanges, SimpleChanges, Input} from '@angular/core';
ngOnChanges(changes: SimpleChanges) {
     for (let propName in changes) {  
    let change = changes[propName];
let curVal  = JSON.stringify(change.currentValue);
    let prevVal = JSON.stringify(change.previousValue);

        console.log(curVal);
        console.log(prevVal);
     }
}