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

【问题标题】：Angular 7 Navigate to parent/:idChildroute/childroute, invoke data according to the route from a serviceAngular 7 导航到 parent/:idChildroute/childroute，根据来自服务的路由调用数据
【发布时间】：2019-07-15 07:29:33
【问题描述】：

我有一个组件，它有一个可滚动的导航列表，其中还有 5 个组件显示单击的列表项的不同信息，例如：当我单击一个列表项时，它会打开一个带有角材料垫的组件-tab-group，有 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 },

        ]
    },

我如何实现这一目标？

提前谢谢你

【问题讨论】：

那么您现在的问题是什么？你知道如何使用激活路由访问路由参数吗？
1- 我在 /:id/main 等组件中编写什么代码来使 :id 工作？ 2-如何捕获并相应地加载路由和 id，以便完成正确的 api 调用以加载数据？
请查看答案

标签： angular angular-routing angular7 snapshot nested-routes

【解决方案1】：

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

1) 从@angular/router 导入ActivatedRoute

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。然后，您可以使用它加载数据。

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

【讨论】：

感谢您的回复。你能告诉我如何检查当前激活的组件代替 main 是什么，例如：localhost:4200/audit/tabset/W011222/main, localhost:4200/audit/tabset/W011222/feed, localhost:4200/审计/tabset/W011222/设置。我有“主要”、“提要”、“操作”、“关联”、“设置”。我想知道当前 URL 中的哪一个？

【解决方案2】：

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

Activated Route

【讨论】：

感谢您的回复。