Question

希望有人可以建议实现我想要的最佳方式。

我有一个用户网格，您可以单击编辑它，然后转到管理用户表单。

我想要做的是将选定的用户ID传递给管理用户表单并显示该用户，我最好如何实现这一目标？

由于安迪

Answer 1

在grid.component.html中，当用户点击网格编辑按钮时，调用一个函数并传递相应的网格数据ID，如下所示。

<button (click)="goToManageForm(gridId)"> Edit</button>

在grid.component.ts中，将id作为参数传递给manageForm组件。

private goToManageForm(id:any){
   this.router.navigate([`/manageForm/${id}`]);
}

在您的路由组件中，添加一个路径到manageForm组件，该组件需要一个参数。

const routes：Routes = [

{
    path: '',
    component: MyMainComponent,
    canActivate: [AuthGuard],
    children: [
      { path: 'grid',    component: GridComponent },
      { path: 'manageForm/:gridId',    component: ManageFormComponent },
]
}

您可以访问manageForm.component.ts中传递的网格ID，如下所示。

import { Component, OnInit } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';

export class manageFormComponent {

   private subscription:Subscription;
   private gridId:any; 

   constructor(private activatedRoute:ActivatedRoute){}

   ngOnInit(): void {

      // subscribe to router event
      this.subscription = this.activatedRoute.params.subscribe(
        (param: any) => {
           if(typeof param['gridId'] !== 'undefined' && param['gridId'].trim !='' ){ 
              this.gridId = param['gridId'];
           }
      });
   }
 }

现在可以在this.gridId

中访问传递的gridId

Angular 2使用传入的参数打开另一个表单

1 个答案: