Angular 7 导航到parent/:idChildroute/childroute，根据服务的路由调用数据

Question

我有一个组件，它有一个可滚动的导航列表，其中还有 5 个组件，它们为单击的列表项显示不同的信息，例如：当我单击一个列表项时，它会打开一个带有 angular material mat-tab-group，一共有5个tab，每个里面都有一个router outlet。这些选项卡组件应该显示通过单击列表项调用的数据信息的不同部分，如果我粘贴更多

http://localhost:4200/audit/tabset/123/main

它应该相应地获取该路由的数据。应用程序路由大致如下所示：

{
        path: 'audit', component: NavComponent,
        children: [
            { path: '', redirectTo: 'tabset', pathMatch: 'full' },
            {
                path: 'tabset', component: TabsetComponent,
                children: [
                    { path: '', redirectTo: 'Main', pathMatch: 'full' },
                    { path: '/:id/main', component: WorkOrderDetailComponent },
                    { path: '/:id/feed', component: FeedComponent },
                    { path: '/:id/operations', component: AuditformsmainComponent },
                    { path: '/:id/associated', component: AssociatedComponent },
                    { path: '/:id/settings', component: SettingsComponent },
                ]
            },
            { path: 'new-work-order', component: NewWorkOrderComponent },

        ]
    },

如何实现？

提前致谢

Answer 1

在您的每个子组件中，例如：main、feed、operations 等，执行此操作：

1) 从 @angular/router

导入 ActivatedRoute

2) 在构造函数中注入 ActivatedRoute

constructor(private route: ActivatedRoute){}

3) 确保您的组件 class 实现了 OnInit。然后，在您的 ngOnInit 方法中，执行以下操作以获取 ID：

ngOnInit() {
  this.route.paramMap.subscribe(
  (params: ParamMap) => {
    this.id = params.get('id');
  }
 )
}

4) 您将在this.id 中获得当前product/item 的id。然后您可以使用它加载数据。

如果有帮助请告诉我:)

Answer 2

您可以使用 ActivatedRoute 或 ActivatedRouteSnapshot 来查找当前激活的路线的 params。然后您可以将必要的参数传递给您的服务方法以检索正确的信息。这是相关的 Angular 文档：

Activated Route

Angular 7 导航到parent/:idChildroute/childroute，根据服务的路由调用数据

Angular 7 Navigate to parent/:idChildroute/childroute, invoke data according to the route from a service

snapshot

nested-routes

angular-routing

angular

angular7