Ag-Grid单元格按钮点击跳转新页面并携带行可编辑数据实现问询

前置准备 #

如果还没有创建编辑页面组件，先执行Angular CLI命令生成：

ng generate component edit-row

1. 配置路由规则 #

修改app-routing.module.ts文件，添加编辑页面的路由配置：

import { EditRowComponent } from './edit-row/edit-row.component';

const routes: Routes = [
  // 保留你现有其他路由配置
  {
    path: 'edit-row/:id',
    component: EditRowComponent
  }
];

2. 改造列表页（app.component.ts）逻辑 #

2.1 注入路由服务 #

在文件头部导入路由依赖，构造函数中注入Router：

import { Router } from '@angular/router';

// ... 其他导入代码保持不变

export class AppComponent {
  constructor(private router: Router) {}
  // ... 其他现有代码保持不变
}

2.2 修改点击回调方法 #

替换原有的alert提示为路由跳转逻辑，两种传参方案可选：

CellUpdate(params){
  if (params.colDef.field === "changeSettings"){
    // 方案1：仅传递行ID（推荐，数据一致性更高）
    // 跳转后编辑页根据ID重新调用接口获取最新行数据，避免缓存旧数据
    this.router.navigate(['/edit-row', params.data.Id]);

    // 方案2：直接传递完整行数据（适合小数据量场景）
    // 无需二次调用接口，但用户刷新编辑页时数据会丢失
    // this.router.navigate(['/edit-row', params.data.Id], {
    //   state: {
    //     rowData: params.data
    //   }
    // });
  }
}

3. 编辑页接收参数加载数据 #

修改edit-row.component.ts，根据你选择的传参方案接收数据：

方案1对应接收逻辑： #

import { ActivatedRoute } from '@angular/router';
// 导入你自己封装的接口请求服务
import { YourDataService } from './your-data.service';

export class EditRowComponent implements OnInit {
  editForm = 你的表单实例;

  constructor(
    private route: ActivatedRoute,
    private dataService: YourDataService
  ) {}

  ngOnInit() {
    // 获取路由参数中的行ID
    const rowId = this.route.snapshot.paramMap.get('id');
    // 调用接口获取当前行完整数据，填充到表单
    this.dataService.getRowDetail(rowId).subscribe(rowData => {
      this.editForm.patchValue(rowData);
    });
  }
}

方案2对应接收逻辑： #

export class EditRowComponent implements OnInit {
  editForm = 你的表单实例;

  ngOnInit() {
    // 从路由状态中获取传递的行数据
    const rowData = history.state?.rowData;
    if (rowData) {
      this.editForm.patchValue(rowData);
    }
  }
}

内容的提问来源于stack exchange，提问作者Bheeshma