如何在应用程序路由模块中两次使用不同路径的相同组件

Question

我创建了 2 种不同的方法，并希望通过传递 id 和 state 来调用一个组件。 我需要在路由模块中创建 2 条具有相同组件的路径。

像这样：

{path:'Generatereport/:state/:city/:status/:financedBy',component:GeneratereportComponent},
{path:'Generatereport/:state',component:GeneratereportComponent},

Answer 1

当路由模块中的2条路径具有相同的组件时，最好使用queryParams

删除下面的路由

{path:'Generatereport/:state/:city/:status/:financedBy',component:GeneratereportComponent},

用下面的路由替换

{path:'Generatereport',component:GeneratereportComponent},

将以下代码添加到按钮操作中

 constructor(private router: Router) {}

 this.router.navigate(['/Generatereport/'], {
    queryParams: {
                    state: 'State',
                    city: 'City',
                    status:'OK',
                    financedBy:'Financed By'
                  }
  });

从 GeneratereportComponent 中检索数据

 constructor(private _Activatedroute: ActivatedRoute) {
    this._Activatedroute.queryParams.subscribe((v) => {
      console.log(v);
    });
  }