Передать значения из всплывающего окна на родительскую страницу с 3 компонентами Angular

Question

Я пытаюсь достичь: - передать значение из Число 3 (компонент хранилища), когда я выбираю строку, которая работает нормально , и это код, используемый для выбора

  onSelect(ev) {
    this.wearHouseId = ev.selected[0].wearHouseID; //i want to send this selected value to "number 1 component spareparts"
    this.wearHouseName = ev.selected[0].wearHouseName;
    console.log(this.wearHouseId)
    console.log(this.wearHouseName)
  }

до Номер 1 (компонент запасных частей) при нажатии на кнопку Номер 2 (компонент modalPopup) с использованием Angular & ngx-datatable

Answer 1

В этом примере давайте вызовем spareparts компонент родительский, modalPopup компонент дочерний, а warehouse компонент внучатый. Вы sh отправляете значение от внука к родителю.

Один простой способ - создать источники событий в дочерних компонентах и ​​компонентах внука. Затем вы можете перенаправить испущенное значение от внука через потомок к родительскому компоненту. Попробуйте следующее

Внук

warehouse.component.ts

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

@Component({
  selector: 'app-warehouse',
  templateUrl: './warehouse.component.html',
  styleUrls: ['./warehouse.component.css']
})
export class WarehouseComponent implements OnInit {
  @Output() onChangeId = new EventEmitter();
  .
  .
  onSelect(ev) {
    this.emitWarehouseId(ev.selected[0].wearHouseID);  // <-- emit id here
    this.wearHouseId = ev.selected[0].wearHouseID;
    this.wearHouseName = ev.selected[0].wearHouseName;
    console.log(this.wearHouseId)
    console.log(this.wearHouseName)
  }

  private emitWarehouseId(id: any) {
    this.onChangeId.emit(id);
  }
}

Child

модальный -popup.component. html

<app-warehouse (onChangeId)="onChangeWarehouseId($event)"></app-warehouse>

modal-popup.component.ts

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

@Component({
  selector: 'app-modal-popup',
  templateUrl: './modal-popup.component.html',
  styleUrls: ['./modal-popup.component.css']
})
export class ModalPopupComponent implements OnInit {
  @Output() warehouseId = new EventEmitter();
  .
  .
  private onChangeWarehouseId(id: any) {
    this.warehouseId.emit(id);
  }
}

Parent

spareparts.component. html

<app-modal-popup (warehouseId)="onChangeWarehouseId($event)"></app-modal-popup>

spareparts.component.ts

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

@Component({
  selector: 'app-spareparts',
  templateUrl: './spareparts.component.html',
  styleUrls: ['./spareparts.component.css']
})
export class SparepartsComponent implements OnInit {
  private onChangeWarehouseId(id: any) {
    console.log(id); // <-- receive id in parent component
  }
}