角2パラメータを渡して別のフォームを開く

Question

希望のものを得るための最良の方法をアドバイスできますか？

私はユーザーのグリッドをクリックして編集することができます。その後、ユーザーの管理フォームに移動します。

私がしたいことは、選択したユーザーIDを管理ユーザーフォームに渡してこのユーザーを表示することです。これを達成するにはどうすればよいでしょうか？

おかげで、あなたのgrid.component.htmlで アンディ

Answer 1

は、ユーザーがグリッドの編集ボタンをクリックしたときに、関数を呼び出すと、以下のように対応するグリッドデータIDを渡します。

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

grid.component.tsには、idをパラメータとしてmanageFormコンポーネントに渡します。

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

ルーティングコンポーネントでは、パラメータを必要とするmanageFormコンポーネントへのルートを追加します。

CONST経路：経路= [

{ 
    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']; 
      } 
     }); 
    } 
} 

今渡さgridIdがthis.gridId