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

Angular 7导航到parent/:idChildroute/childroute,根据来自服务的路由调用数据,angular,angular-routing,angular7,snapshot,nested-routes,Angular,Angular Routing,Angular7,Snapshot,Nested Routes,我有一个组件,它有一个可滚动的导航列表,其中还有5个组件,显示所单击列表项的不同信息,例如:当我单击一个列表项时,它会打开一个带有角材料垫选项卡组的组件,有5个选项卡,每个选项卡中都有一个路由器出口。这些选项卡组件应该显示通过单击列表项调用的数据信息的不同部分,如果我粘贴,则更多 http://localhost:4200/audit/tabset/123/main 它应该相应地获取该路由的数据。应用程序路径大致如下所示: { path: 'audit', component:

我有一个组件,它有一个可滚动的导航列表,其中还有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 },

        ]
    },
我如何做到这一点


提前感谢您

在您的每个子组件中,例如:主、提要、操作等,请执行以下操作:

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


让我知道这是否有帮助:)

在每个子组件中,例如:主、提要、操作等,请执行以下操作:

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


如果有帮助,请告诉我:)

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


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


那么您现在的问题是什么?您知道如何使用activatedroute访问路由参数吗?1-我应该在/:id/main etc组件中编写什么代码以使:id工作?2-如何捕获并加载相应的路由和id,以便进行正确的api调用来加载数据?请检查答案。那么您现在的问题是什么?您知道如何使用activatedroute访问路由参数吗?1-我应该在/:id/main etc组件中编写什么代码以使:id工作?2-如何相应地捕获和加载路由和id,以便进行正确的api调用来加载数据?请检查答案谢谢您的回复。谢谢您的回复。谢谢您的回复。您能告诉我如何检查当前激活的组件来代替main is例如:localhost:4200/audit/tabset/W011222/main,localhost:4200/audit/tabset/W011222/feed,localhost:4200/audit/tabset/W011222/settings。我有“主”、“提要”、“操作”、“关联”、“设置”。我想知道当前URL中有哪一个?谢谢您的回复。您能告诉我如何检查当前激活的组件来代替main is例如:localhost:4200/audit/tabset/W011222/main,localhost:4200/audit/tabset/W011222/feed,localhost:4200/audit/tabset/W011222/settings。我有“主”、“提要”、“操作”、“关联”、“设置”。我想知道当前URL中有哪一个?