Question

我无法从Angular 6应用程序的子组件中获取路由参数

我在app-routing.module中设置了以下路由：

{
    path: 'item/:id',
    component: ItemLayoutComponent,
    children: [
        { path: '', redirectTo: 'inbox',  pathMatch: 'full' },
        { path: 'inbox', loadChildren: './feature/inbox/inbox.module#InboxModule' }
    ]
},

然后在我的inbox-routing-module.ts中：

{
    path: '',
    component: InboxComponent,
    children: [
        { path: '', redirectTo: 'messages',  pathMatch: 'full' },
        {
            path: 'messages', component: MessagesComponent
        },
    ]
}

这使我可以使用一个类似于以下网址的URL到达我的消息组件：

item/5200/inbox/messages

我的问题是，在我的ItemLayoutComponent中，我可以使用以下代码获取id字段的值（在本例中为5200）：

this.route.snapshot.paramMap.get('id')

但是，我在MessagesComponent中需要此ID的值。目前，相同的代码使我为空。

Answer 1

原来，我需要以下条件：

this.route.parent.parent.parent.snapshot.paramMap.get('id')

感谢@jonrsharpe向我指出正确的方向

Answer 2

尝试这样：

HTML：

{
    path: 'item/:id',
    component: ItemLayoutComponent,
    children: [
        { path: '', redirectTo: 'inbox',  pathMatch: 'full' },
        { path: 'inbox', loadChildren: './feature/inbox/inbox.module#InboxModule' }
    ]
},

TS：

import { Router, ActivatedRoute } from '@angular/router';

id: any;

constructor(
        private router: Router,
        private route: ActivatedRoute,
    ) {
    }

this.route.paramMap.subscribe(param => {
            this.id = param.get('id');
        });

Answer 3

我遇到的问题是，功能模块的激活快照中不存在根模块路径中的路由参数。

从@jonrsharpe，我曾经使用自下而上的方法运行while循环，直到在父母中发现路由参数为止。

var cgName: string = "";
cgName = next.paramMap.get('cgname');
var snap = next;

while (cgName === null && snap.parent !== null) {
     cgName = snap.parent.paramMap.get('cgname');
     snap = snap.parent;
}

我的路线定义就像

根模块

const appRoutes: Routes = [
  { path: 'default', component: DefaultComponent },
  {
    path: ':cgname',
    canActivate: [PathGuard],
    component: LoggedUserLayoutComponent,
    children: [
      { path: 'shop', loadChildren: () => import('./../ShoppingModule/shopping.module').then(mod => mod.ShoppingModule) },
      { path: 'welcome', component: WelcomeComponent, canActivate: [AuthGuard] },
      { path: '', component: LoginRedirectProxyComponent, pathMatch: 'prefix' }
    ]
  },
  { path: '', redirectTo: '/default', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

功能模块

const routes: Routes = [
  { path: 'product', component: ProductDetailComponent, canActivate: [PathGuard] },
  { path: '', component: ShopPageComponent, canActivate: [PathGuard] },
];

在Angular子组件中获取Route参数

3 个答案: