Отправка данных в другой компонент с помощью углового излучения

На странице редактирования товара есть кнопка расчета дези. При нажатии этой кнопки открывается другой компонент — модальный. В открытом модальном окне производится расчет дези с учетом необходимой информации. Когда я вывел эту полученную от пользователя информацию в консоль на странице редактирования товара, значение силы тяжести было записано как длина. Я исследовал, но не смог найти причину. Созданная мной структура эмиссии была немного длинной. Можете ли вы дать мне предложения по написанию более короткого и чистого кода?

Я попытался отправить данные в одном выпуске, но получил ошибку, поскольку в отправку поступило только одни данные.

модальный компонент:


  @Output() dimensionalWeightCalculated: EventEmitter<number> = new EventEmitter();
  @Output() width: EventEmitter<number> = new EventEmitter();
  @Output() length: EventEmitter<number> = new EventEmitter();
  @Output() gravity: EventEmitter<number> = new EventEmitter();
  @Output() height: EventEmitter<number> = new EventEmitter();

...

 calculateDesi(): void {
    this.submitted = true;

    if (this.desiForm.valid) {
      const { length, width, height, gravity } = this.desiForm.value;
      const dimensionalWeight = gravity ? parseFloat(gravity) : (length * width * height) / 3000;
  
      this.dimensionalWeightCalculated.emit(dimensionalWeight); // Sadece tek bir değer yayınlayın
      this.length.emit(length);
      this.length.emit(gravity);
      console.info(gravity)
      this.width.emit(width);
      this.height.emit(height);
  
      this.modalService.dismissAll();
    }
  }

Компонент редактирования продукта:

openDimensionalWeightCalculator(): void {
    const modalRef = this.modalService.open(DimensionalWeightCalculatorComponent, { centered: true, size: 'lg' });

    modalRef.componentInstance.dimensionalWeightCalculated.subscribe((dimensionalWeight: number) => {
      console.info('Calculated dimensional weight:', dimensionalWeight);
      this.productEditForm.get('ProductDetail')?.get('dimensional_weight')?.setValue(dimensionalWeight.toString());
      modalRef.close();
    });

    modalRef.componentInstance.length.subscribe((length: number) => {
      console.info('length:', length);
      this.productEditForm.get('ProductDetail')?.get('length')?.setValue(length.toString());
      modalRef.close();
    });

    modalRef.componentInstance.gravity.subscribe((gravity: number) => {
      console.info('gravity:', gravity);
      this.productEditForm.get('ProductDetail')?.get('weight')?.setValue(gravity.toString());
      modalRef.close();
    });

    modalRef.componentInstance.width.subscribe((width: number) => {
      console.info('width:', width);
      this.productEditForm.get('ProductDetail')?.get('width')?.setValue(width.toString());
      modalRef.close();
    });

    modalRef.componentInstance.height.subscribe((height: number) => {
      console.info('height:', height);
      this.productEditForm.get('ProductDetail')?.get('height')?.setValue(height.toString());
      modalRef.close();
    });
  }
}

текущий вывод консоли:

  • Расчетный объемный вес: 4
  • длина: 1
  • длина: 4
  • 4
  • ширина: 2
  • высота: 3
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
0
50
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Мы можем использовать joinLatest из rxjs, чтобы получить все значения одновременно.

openDimensionalWeightCalculator(): void {
    const modalRef = this.modalService.open(DimensionalWeightCalculatorComponent, { centered: true, size: 'lg' });
    combineLatest(
       modalRef.componentInstance.dimensionalWeightCalculated,
       modalRef.componentInstance.length,
       modalRef.componentInstance.gravity,
       modalRef.componentInstance.width,
       modalRef.componentInstance.height,
    ).subscribe(([
       dimensional_weight,
       length, 
       gravity, 
       width, 
       height
      ]: Array<any>) => {
          const ProductDetailCtrl = this.productEditForm.get('ProductDetail');
          if (ProductDetailCtrl) {
               const patchValueObj = {
                   dimensional_weight,
                   length, 
                   gravity, 
                   width, 
                   height 
               };
               // remove all undefined and falsy values except zero
               const result = {};
               const patchValueObjFiltered = Object.keys(object).forEach(k => (object[k] || object[k] === 0) && (result[k] = object[k]));
               
               ProductDetailCtrl.patchValue(result);
          }
          modalRef.close();
    });
}

Другие вопросы по теме