[英]Pass data between 2 components in Angular
我正在嘗試通過單擊該行將數據從我的 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;
});
}
}
我被阻止了,我真的很感謝你們的幫助。 謝謝!
為什么不使用服務 class 來根據數據的 id 或索引獲取數據,例如,您將 id 作為參數傳遞給新的子組件並運行 ngOninit 以根據標識符獲取該數據
ngOnInit() {
this.sub=this._Activatedroute.paramMap.subscribe(params => {
const id = params.get('id');
let dealer=this.dealsService.getDealer(id);
});
我正在創建 getDealer() 假設您有一個在您的服務中獲得單個經銷商返回 function 如果不是那么只需運行dealer.find(dealer => dealer.ID==id);
然后在父路由中使用您的方法=>
makeCellClicked(event) {
this.router.navigate(['/dealer-details', event.id]);
}
不確定這是否回答了您關於如何獲取和顯示該數據行的問題。
共享服務是正確的解決方案。 如何在 Angular 2 中的兩個組件之間傳遞數據
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.