Question

在角度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>

Answer 2

我没有看到这样的路线：“视图”。

  { 
    path: '', 
    redirectTo: 'view'
  }

我将其更改为“活动”，并将其更改为树的该部分的全部捕获路线。我还对您的路线进行了一些重构，请同时查看两者：

主要路线

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

子路线

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

在角度8中设置动态路由

2 个答案: