javascript - 在 Angular 8 中设置动态路由

Question

我在 Angular 8 中设置路由时遇到一些问题。 我这样做是这样的:

'company/:id/activity'
'company/:id/contacts'

在activatedRoute中没有获取任何参数:

this.activateRoute.params
            .subscribe(param => console.log(param) )

有什么运气可以解决这个问题吗？

主路由文件:

{
                path: 'company/:id',
                children: [
                    {
                        path: '',
                        loadChildren: () => import('@app/features/company-view/company-view.module').then(m => m.CompanyViewModule)
                    }
                ]
            }

延迟加载路由文件:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { CompanyViewComponent } from '@app/features/company-view/company-view.component';
import { PendingChangesGuard } from '@app/shared/guards';
import { CompanyActivityComponent } from './company-activity/company-activity.component';

const routes: Routes = [
  {
    path: '',
    component: CompanyViewComponent,
    children: [
      { 
        path: '', 
        redirectTo: 'view'
      },
      {
        path: 'activity',
        component: CompanyActivityComponent,
        data: {
          title: "Company Activity"
        }
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class CompanyViewRoutingModule { }

如果我使用下面的路由，那么它工作正常:

const routes: Routes = [
  {
    path: '',
    component: CompanyViewComponent,
    children: [
      {
        path: ':id/activity',
        component: CompanyActivityComponent,
        data: {
          title: "Company Activity"
        }
      },
      {
        path: '**',
        redirectTo: 'activity'
      }
    ]
  }
];

那么如何将默认路由设置为 :id/activity ？

Answer 1

所以。您希望通过路由传递组件的变量。 在你的routes.ts中可以像这样path: 'company/:id/:activity'。 然后您需要将其交给您的组件。 我正在使用这个:id = this.route.snapshot.params['id']或activity = this.route.snapshot.params['activity']。 从这里你可以通过另一个组件或任何你想要的。

例如:

<app-testcomponent
    [id]="id"
    [activity]="activity">
</app-testcomponent>