在 Angular 的两个组件之间传递数据答案

【问题标题】：Pass data between 2 components in Angular在 Angular 的两个组件之间传递数据
【发布时间】：2020-10-10 17:04:09
【问题描述】：

我正在尝试通过单击行将数据从我的 ag-Grid 传递到新组件中的表单。我可以通过 onCellClicked 单击单元格从行中获取数据。但我现在不知道如何将它传递给我的其他组件。这是我的 2 个接口：

这是我的代码： ag-Grid.ts：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Grid, GridApi } from 'ag-grid-community';
import { AgGridAngular } from 'ag-grid-angular';
import { DealsService } from '../services/deals.service';


import * as moment from 'moment';
import { RouterLinkRendererComponent } from '../router-link-renderer/router-link-renderer.component';
@Component({
  selector: 'app-deals',
  templateUrl: './deals.component.html',
  styleUrls: ['./deals.component.scss']
})
export class DealsComponent implements OnInit {
  showNav = true;

  private gridApi;
  gridOptions = {
    rowHeight :90,
    headerHeight:60,

    defaultColDef: {
      sortable: true
  },
  }
  columnDefs = [


       {
      headerName: 'Deal',
      field:'DEALID',
      cellRendererFramework: RouterLinkRendererComponent,
      cellRendererParams: {
        inRouterLink: '/Repo'
      },
      width:300,
      resizable:true,
      onCellClicked: this.makeCellClicked.bind(this),
      filter: 'agNumberColumnFilter',


       },
       {
        headerName:'Block',
        field:'BLOCKID',
        width:200,
        resizable:true,
        filter: 'agNumberColumnFilter',
        columnGroupShow:'open',
      },
      ],
    },
   
];







rowData : any;

constructor(private service:DealsService) {}

onGridReady(params) {
  this.gridApi = params.api; 
}

getDropDownlist(){
  this.service.getDealsList().subscribe(data => this.rowData = data);

  }



  makeCellClicked(event) {
    console.log(event.data);

  }




ngOnInit() {
this.service.getDealsList().subscribe(data => {
  this.rowData = data;
}); 

}
}

我被阻止了，非常感谢你们的帮助。谢谢！

【问题讨论】：

您的示例代码非常庞大！尝试将其缩小到会阅读您的人的想法...
您要向其传递数据的另一个组件在哪里？
这能回答你的问题吗？ How to pass data between two components in Angular 2
试试这个：therichpost.com/…

标签： javascript angular typescript ag-grid pass-data

【解决方案1】：

为什么不使用服务类根据数据的 id 或索引来获取数据，例如，您将 id 作为参数传递给新的子组件并运行 ngOninit 以根据标识符获取该数据

ngOnInit() {
  this.sub=this._Activatedroute.paramMap.subscribe(params => { 
      const id = params.get('id'); 
      let dealer=this.dealsService.getDealer(id);    
  });

我正在创建 getDealer() 假设您的服务中有一个获取单个经销商返回功能，如果没有，那么只需运行 dealer.find(dealer => dealer.ID==id);

然后在父路由中的方法 =>

makeCellClicked(event) {
this.router.navigate(['/dealer-details', event.id]);
}

不确定这是否回答了您关于如何获取和显示该数据行的问题。

【讨论】：

【解决方案2】：

共享服务是正确的解决方案。 How to pass data between two components in Angular 2

【讨论】：