如何传递查询参数以加载基于 angular 路由加载的 angular 组件

Question

我有以下要求，要根据传递给它的查询参数用一组记录加载 angular 组件。

用例-

我正在开发一个事件管理应用程序。事件具有许多可查询的属性。例如 - 事件类型、客户、优先级、已升级

比方说，处理事件的用户正在审查特定事件并希望审查该客户报告的其他事件，用户应该能够单击具有超链接的 "Customer" 字段加载客户报告的所有事件。

同样，用户可以单击具有超链接的 "Escalated" 字段以加载所有升级的事件。

单击这些属性中的每一个时，输出是满足超链接标准的所有事件的列表。

用户也可以直接点击所有事件菜单来加载系统中的所有事件而不应用任何过滤器。

加载问题列表的 angular 组件应该在加载组件时接收过滤条件。

用户通常可以直接从主菜单或通过单击事件中的属性（客户、优先级、升级等）导航到此事件-list.component-detail.component

同样，还有许多其他地方可以加载事件-list.component。

为了加载此组件，我使用了以下 angular 路由配置。

const routes: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'home', component: HomeComponent, canActivate: [AuthGuard]},
  {path: 'listIssues', component: IncidentListComponent, canActivate: [AuthGuard]},
]

有没有一种方法可以将参数传递给 IncidentList 组件，组件可以解析该组件以加载 all/specific 满足传递给组件的参数的记录？

例如，如果客户单击事件详细信息组件，则 => 属性名称（客户）和属性值（客户名称）应作为输入发送到事件列表组件。

我按照建议快速设置了路由参数。但是我有以下问题。

如果我从锚标记中删除 routerLink 属性，则超链接不会在事件详细信息组件上呈现。

<a (click)="routeToIncidentDetail(customer.id)">{{customer.name}}</a>

routeToIssueDetail(id: string){
    console.log('Router to issue detail - ', id);
    this.router.navigate(['//listIssues', { id: id, name: 'customer', project: this.currentProjectId }]);
  }

我不能直接在模板上设置它，因为我需要调用一个方法将参数列表传递给事件-list.component。

Answer 1

您可以像这样传递查询参数：

this.router.navigate(['listIssues'], { queryParams: {attr: 'customer'}});

Answer 2

试试这个code.I希望对你有帮助。

this.router.navigate(['listIssues'], { state: { id: id, name: 'customer', 
project: this.currentProjectId } });

//get data
constructor(private router: Router) {
  console.log(this.router.getCurrentNavigation().extras.state.example); 
}

如何传递查询参数以加载基于 angular 路由加载的 angular 组件

How to pass query params to load angular component that is loaded based on angular routing

angular-routing

angular