使用 3 个组件将值从弹出窗口传递到父页面 Angular

Question

我要实现的目标是：- 当我 select 行正常工作时 编号 3（仓库组件）传递值 它是用于 selection

的代码

  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 组件称为 parent，将 modalPopup 组件称为 child，将 warehouse 组件称为 grandchild.您希望发出一个从 grandchild 到 parent.

的值

一种简单的方法是在 child 和 grandchild 组件中创建事件发射器。然后，您可以将发出的值从 grandchild 通过 child 重定向到 parent 组件。尝试以下

盛大child

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

modal-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

备件。component.html

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

备件。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
  }
}

使用 3 个组件将值从弹出窗口传递到父页面 Angular

Pass values from popup to parent page with 3 components Angular

ngx-datatable

angular