获取app-component中的动态路由参数值并添加到app的每条路由中 Angular 12

Question

在我的 Angular 12 应用程序中，我需要在应用程序加载时提取路由参数的值并将其添加到应用程序中的每个路由。应用程序的用户将收到 URL 喜欢 https://testdomain.blah/car/welcome. Now the value 'car' in the route is dynamic. It can be 'bus', 'bike'. etc. I have to pick up that value in the app-component and add it to each route in the app. So when the user navigates to another route like details for example, the URL should be https://testdomain.blah/car/details/uid

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

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"));
    });

但是控制台中记录了空值。所以我无法在应用程序组件中获得 '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'
        }
    ]
 }

将您的应用程序模块修改为 bootstrap 根组件：

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

现在您的激活路线订阅应该可以使用了。

获取app-component中的动态路由参数值并添加到app的每条路由中 Angular 12

Get dynamic route parameter value in app-component and add it to every route of the app in Angular 12

routes

angular-routing

angular