时间戳

首页 > 解决方案 > 如何传递查询参数以加载基于角度路由加载的角度组件

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

问题描述

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

用例 -

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

假设，处理事件的用户正在查看特定事件并想要查看该客户报告的其他事件，用户应该能够单击具有超链接的“客户”字段以加载客户报告的所有事件.

类似地，用户可以单击具有超链接的“已升级”字段以加载所有已升级的事件。

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

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

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

用户通常可以直接从主菜单导航到此事件列表组件，也可以通过单击事件详细信息组件中的属性（客户、优先级、升级等）来导航到此事件列表组件

同样，还有很多其他地方可以加载 event-list.component。

为了加载这个组件，我使用了以下角度路由配置。

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

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

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

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

如果我从锚标记中删除 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 }]);
  }

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

标签： angularangular-routing

解决方案

试试这个代码。我希望它会对你有所帮助。

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); 
}

推荐阅读