在app-component中获取动态路由参数值，并将其添加到Angular 12中应用的每个路由中

Question

在我的Angular 12应用中，我需要在应用加载时提取路由参数的值，并将其添加到应用中的每个路由中。应用的用户会收到一个URL，比如https://testdomain.blah/car/welcome。现在，路由中的"car"值是动态的。它可以是'bus'， 'bike'。等。我必须在app-component中获取这个值，并将其添加到应用中的每条路由中。因此，当用户导航到另一条路由(例如details)时，URL应该是https://testdomain.blah/car/details/uid

app-routing.module中定义的路由。文件

const routes: Routes = [
{
path: ':type',
children: [
{
path: '',
redirectTo: 'welcome',
pathMatch: 'full'
},
{
path: 'welcome',
loadChildren: () => import('./welcome/welcome.module').then(m => m.WelcomeModule)
},
{
path: 'details/:uid',
loadChildren: () => import('./details/details.module').then(m => m.DetailsModule)
},
{
path: '**',
redirectTo: 'welcome',
pathMatch: 'full'
}
]
}
];

我试图在app.component.ts文件中获取动态路由参数值，如下所示

this.activatedRoute.paramMap.subscribe((params: ParamMap) => {
console.log(params.get("type"));
});

但是空值被登录到控制台。所以我无法在app组件中获得那个'car'值。我不知道是什么原因导致了这个问题，也不知道如何将这个参数添加到应用程序中的每条路由中。请帮助我解决这个问题。

Answer 1

因为你依赖于AppComponent，它也是根组件，所以对于你的用例，你需要有一个单独的根组件，它将显示AppComponent，然后AppComponent可以侦听参数:

创建一个包装器根组件:

import { Component } from '@angular/core';
@Component({
selector: 'root',
template: `<router-outlet></router-outlet>`,
})
export class RootComponent {
constructor() {  }
}

修改你的index.html来删除你的应用组件选择器，并使用:

<root>Loading...</root>

然后修改路由，包括AppComponent:

const routes: Routes = [
{
path: ':type',
component: AppComponent
children: [
{
path: '',
redirectTo: 'welcome',
pathMatch: 'full'
},
{
path: 'welcome',
loadChildren: () => import('./welcome/welcome.module').then(m => m.WelcomeModule)
},
{
path: 'details/:uid',
loadChildren: () => import('./details/details.module').then(m => m.DetailsModule)
},
{
path: '**',
redirectTo: 'welcome',
pathMatch: 'full'
}
]
}

修改你的应用模块来引导根组件:

declarations: [AppComponent, RootComponent],
bootstrap: [RootComponent]

现在你的激活路由订阅应该工作了。