Блог

Я пытаюсь иметь два уровня вложенных маршрутов в моем myfile.файл routing.module.ts, но когда я пытаюсь получить доступ к маршруту, он перенаправляет на домашний. Вот мой код:

routing.module.ts

 .
.
.
const routes: Routes = [
  {
    path: '',
    children: [
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      {
        path: 'home',
        component: HomeComponent,
        children: [
          { path: '', redirectTo: 'page' },
          {
            path: 'page',
            component: PageComponent,
            canActivate: [PageGuard],
          },
          {
            path: 'more', component: MoreComponent,
            children: [
              { path: '', component: MoreComponent },
              { path: 'plants', component: PlantsComponent },
              { path: 'cars', component: CarsComponent },
              { path: 'pets', component: PetsComponent },
          ]},
        ],
      },
    ],
  },
];

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

в more.component.html Я добавил <router-outlet></router-outlet>

и в home.component.html У меня есть ссылки следующим образом:

 <a [routerLink]="['home/page/more/plants']">plants</a><br />
<a [routerLink]="['home/page/more/cars']">cars</a><br />
<a [routerLink]="['home/page/more/pets']">pets</a><br />
 

итак, проблема, с которой я сталкиваюсь, заключается в том, что я не могу получить доступ к каждому разделу (например, home / page / more / plants), потому что он постоянно перенаправляет на home.

Кто-нибудь знает, в чем проблема?

Вам не нужен первый пустой уровень,

Это может решить вашу проблему:

 const routes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    {
      path: 'home',
      component: HomeComponent,
      children: [
        { path: '', redirectTo: 'page' },
        {
          path: 'page',
          component: PageComponent,
          canActivate: [PageGuard],
        },
        {
          path: 'more', component: MoreComponent,
          children: [
            { path: '', component: MoreComponent },
            { path: 'plants', component: PlantsComponent },
            { path: 'cars', component: CarsComponent },
            { path: 'pets', component: PetsComponent },
        ]},
      ],
    }
];
 

Обратите внимание, что все компоненты, поставляемые с дочерними элементами, должны содержать <router-outlet></router-outlet> like HomeComponent amp; MoreComponent