Angular 2 使用传入的参数打开不同的表单

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 组件。

常量路线：路线=[

{
    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 使用传入的参数打开不同的表单

Angular 2 Opening a different form with a passed in parameter

angular2-forms

angular2-routing