嵌套路线 Angular

Question

我试图在我的 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），因为它一直重定向到主页。

有人知道问题出在哪里吗？

Answer 1

你不需要第一个空白关卡，

这可能会解决您的问题：

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>，例如 HomeComponent 和 MoreComponent

嵌套路线 Angular

Nested routes Angular

angular-routing

angular