Передавать данные между 2 компонентами в Angular - PullRequest
Новая
       116

Передавать данные между 2 компонентами в Angular

0 голосов
/ 20 июня 2020

Я пытаюсь передать данные из моей ag-Grid в форму в новом компоненте, щелкнув строку. Я мог получить данные из строки, щелкнув ячейку через onCellClicked . Но я не знаю, как передать его другому компоненту сейчас. вот мои 2 интерфейса: Ag-Grid

Форма

и вот мой код: 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;
}); 

}
}

Я заблокирован, и я очень благодарен за вашу помощь, ребята. Спасибо!

Ответы [ 2 ]

0 голосов
/ 25 июня 2020

Общий сервис был правильным решением. Как передавать данные между двумя компонентами в Angular 2

0 голосов
/ 20 июня 2020

Почему бы не использовать класс службы для получения данных на основе идентификатора или индекса данных, например, вы передаете идентификатор в качестве параметра новому дочернему компоненту и запускаете 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]);
}

Не уверен, что это отвечает на ваш вопрос о том, как получить и отобразить эту строку данных.

...