Angular 6路线的延迟加载问题

Question

我想在您的应用中使用延迟加载。 一个有2个模块：登录和汽车。 延迟加载工作正常，但路由/ add-car不起作用。 为什么？ 找不到路径/ add-car，并将其重定向到PageNotFoundComponent。

app.routing.module.ts

const appRoutes: Routes = [
    {
        path: '',
        pathMatch: 'full',
        redirectTo: 'login'
    },
    {
        path: 'cars',
        canLoad: [AuthCanLoadGuard],
        loadChildren: './cars/cars.module#CarsModule',
    },
    {
        path: 'user-account',
        component: UserAccountComponent,
        canActivate: [AuthGuardsService]
    },
    {
        path: '**',
        component: PageNotFoundComponent
    }
];

@NgModule({
    imports: [RouterModule.forRoot(appRoutes, {enableTracing: true})],
    exports: [RouterModule]
  })

cars.routing.module.ts

const carsRoutes: Routes = [
    {
        path: '',
        component: CarsComponent,
        children: [
            {
                path: '',
                component: CarsListComponent,
                resolve: { cars : CarsListResolve } // przeniesione z app.routing.module.ts
            },
            {
                path: ':id',
                component: CarsDetailsComponent,
                canDeactivate: [FormCanDeactivateGuard],
                resolve: { car: CarResolve }
            }
        ]
    },
    {
        path: '/add-car',
        component: AddCarComponent,

    }
];

@NgModule({
    imports: [RouterModule.forChild(carsRoutes)],
    exports: [RouterModule]
  })

Answer 1

路径不能以斜线开头。 将/add-car调整为add-car ：

{
        path: 'add-car',
        component: AddCarComponent,

    }

并且，如上面的答案中所述，您还需要/cars上下文。 由于add-car是孩子，因此只能在/cars下使用，因此在浏览器中使用的路径是/cars/add-cars

Answer 2

您应该重定向到cars/add-car因为add-car是cars.routing.module.ts的一部分； 另外，在路由时，请确保使用{ relativeTo: this.route } 。 例如： this.router.navigate(['../add-car'], { relativeTo: this.route });

Answer 3

如果我可以得到/ car-add路径，我应该在app.routing.module.ts中添加此路径吗？ 在汽车模块外添加addCarComponent会正确吗？