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

Question

我有一个组件，其中有一个可滚动的导航列表，其中有5个组件显示单击列表项的不同信息，例如：当我点击列表项时，它打开一个带有角度材料垫片的组件 - 组，有5个选项卡，每个选项卡都有一个路由器插座。这些选项卡组件应显示通过单击列表项调用的数据信息的不同部分，如果我粘贴则更多

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）从ActivatedRoute进口@angular/router

2）在构造函数中注入ActivatedRoute

constructor(private route: ActivatedRoute){}

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

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

4）然后，您将获得this.id中当前产品/项目的ID。然后，您可以使用它加载数据。

如果这有帮助，请告诉我:)

Answer 2

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

Activated Route