Question

问题

我有两个组件是所有其他路线的父母。但我需要在我的应用程序中添加延迟加载。因此，我试图弄清楚如何将模块作为父组件的子项进行延迟加载，其唯一目的是充当模板。

示例

我有app.routing.ts，它有两条路线。

export const routes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full'},
    { path: '', component: PublicComponent, data: { title: 'Public Views' }, children: PUBLIC_ROUTES },
    { path: '', component: SecureComponent, canActivate: [Guard], data: { title: 'Secure Views' }, children: SECURE_ROUTES }
];

这允许我通过一个模板控制任何安全路由，并通过不同的模板控制任何公共路由。这些模板为PublicComponent和SecureComponent。

因此，如果我们遵循PublicComponent的路径，我将创建PUBLIC_ROUTES并延迟通过该路由路径公开的每个组件。

public.routes.ts

export const PUBLIC_ROUTES: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
   { path: 'home', component: HomeComponent},
   { path: 'about', loadChildren: 'app/public/about/about.module#AboutModule' }
];

正如您在上面所看到的，我正在加载HomeComponent，因此它将是在应用程序中加载的默认页面，但我想延迟加载AboutModule作为PublicComponent的子项。

解释

我认为我可以编写一些花哨的*ngIf语句来使这项工作适合我自己，但理解如何做到这一点是理想的。现在，它会加载HomeComponent，但是当我转到AboutModule时，它会显示模板，但会遗漏所有AboutModule html。

问题

有谁知道这是否可行，如果有，我可以找到一个例子？我无法完成这项工作。

延迟加载模块路由作为组件的子项

0 个答案: