Блог

Главная - Вопросы по программированию - Angular как передать 2 данные дочернему компоненту и использовать ngOnChanges и SimpleChanges

Angular как передать 2 данные дочернему компоненту и использовать ngOnChanges и SimpleChanges

#javascript #angular

#javascript #angular

Вопрос:

Я пытаюсь отправить две переменные дочернему компоненту и получить значение каждой переменной в реальном времени, это нормально работало только с одной переменной ([Message]=»Message»), теперь мне нужно передать другие данные, но я получаю сообщение об ошибке консоли: «Не удается найти ‘previousValue’из неопределенных». Эта ошибка возникает при обновлении переменной totalAmountCart (получение данных из sessionStorage) Как я могу это решить? Может быть, еще один жизненный цикл? Заранее спасибо

Дочерний компонент (приемник):

 import { Component, OnInit, SimpleChanges, Input} from '@angular/core';

@Input() Message: string;
@Input() totalAmountCart: number;

ngOnChanges(changes: SimpleChanges) {

    const previousValue1 = changes.Message.previousValue;
    const currentValue1 = changes.Message.currentValue;
    if (previousValue1 !== currentValue1) {
      this.userDetails = this.Message; 
    }
    
    const previousValue2 = changes.totalAmountCart.previousValue;
    const currentValue2 = changes.totalAmountCart.currentValue;
    if (previousValue2 !== currentValue2) {
      this.totalAmount = this.totalAmountCart;
    }

}

Родительский компонент (отправитель):

 @Component({
  selector: 'app-store',
  template: '<app-header [Message]="Message" [totalAmountCart]="totalAmount"></app-header>',

})
export class StoreComponent implements OnInit{

  ngOnInit(){
    getUserData(){
      this.Message = '{ id: 1234, userName: Nick }'
    }
  }
  
  getSessionStorage(){
    this.totalAmount = this.storageProducts.map(x => x.amount).reduce((a, b) => a   b);
  }
}

Ответ №1:

Если я установлю два условия if для оценки изменений, это сработает, в любом случае я уверен, что есть лучший способ решить эту проблему

 ngOnChanges(changes: SimpleChanges) {

    if(changes.Message){
      const previousValue1 = changes.Message.previousValue;
      const currentValue1 = changes.Message.currentValue;
      if (previousValue1 !== currentValue1) {
        this.userDetails = this.Message; 
      }
    }
    
    if(changes.totalAmountCart){
      const previousValue2 = changes.totalAmountCart.previousValue;
      const currentValue2 = changes.totalAmountCart.currentValue;
      if (previousValue2 !== currentValue2) {
        this.totalAmount = this.totalAmountCart;
      }
    }
     
  }