代码之家 › 专栏 › 技术社区 › Mark Perry

多个子路径的角度延迟加载

angular-routing lazy-loading angular

0

Mark Perry · 技术社区 · 7 年前

这是一个我真的不应该被粘住的东西,但我并没有真正使用懒惰的加载超过每一个模块的单一路线。

我有一个延迟加载的模块,比如:

const appRoutes: Routes = [
...other routes...
  { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
...other routes...            
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, { initialNavigation: 'enabled', preloadingStrategy: PreloadAllModules });

指向具有子路由的模块:

export const routing: ModuleWithProviders = RouterModule.forChild([
    {
    path: '',
    component: RootComponent, pathMatch: 'full', canActivate: [AuthGuardAdmin],
        data: {
            title: 'Dashboard',
            meta: [{ name: 'description', content: 'Administration home screen. From here you have access to the configurable parts of the site.' }]
        },
    children: [
            { path: '', component: HomeComponent, data: { title: 'Dashboard' } },
            { path: 'home', component: HomeComponent, data: { title: 'Dashboard' } },
            { path: 'settings', component: SettingsComponent },
            { path: 'albums', component: AlbumComponent, data: { title: 'Album Management' } },
            { path: 'reviews-admin', component: ReviewAdminComponent, data: { title: 'Reviews' } },
            { path: 'users-admin', component: AlbumComponent, data: { title: 'Users' } },
            { path: 'roles-admin', component: RolesManagmentComponent, data: { title: 'Roles' } },
            { path: 'events-admin', component: EventsManagementComponent, data: { title: 'Events' } },
            { path: 'slider-management', component: SliderManagementComponent, data: { title: 'Slides' } },
            { path: 'galleries', component: GalleryComponent, data: { title: 'Galleries' } },
            { path: 'images', component: ImageFileComponent, data: { title: 'Images' } },
            { path: 'tags', component: TagsComponent, data: { title: 'Tags' } },
            { path: 'about-page', component: AboutPageComponent, data: { title: 'About Page' } },
            { path: 'faq-management', component: FaqManagementComponent, data: { title: 'FAQ Management' } },
            { path: 'blog-management', component: BlogManagementComponent, data: { title: 'Manage Blog Posts' } },
            { path: 'card-management', component: CardManagementComponent, data: { title: 'Manage front page cards' } }
        ]
    }
]);

问题是我无法到达子路径,例如仪表板/设置

这个模块是一个常规模块,工作正常,但我使用的是服务器端渲染,并且有一些第三方组件使用窗口,这会导致我对任何包含“仪表板”的路由禁用SSR。

所以我的问题是,我怎样才能让孩子们在一条懒惰的、满负荷的道路上成长呢?

事先谢谢!

编辑:

我试着用仪表板模块将每个路径声明为一个懒惰的模块,但当我这样做时,我会得到一个错误,即组件不是ngmodule的一部分,这显然是错误的,因为它是错误的,所以我遗漏了一些东西。如果我将Lazy子组件添加到仪表板声明中,我被告知它在2个模块中声明,如果我将其从一个模块中移除,我被告知它不在任何模块中……现在把我的头发拔出来xd

1 回复 | 直到 7 年前

1

0

Mark Perry 7 年前

    path: '',
    component: RootComponent, pathMatch:'full', canActivate: [AuthGuardAdmin],
        data: {
            title: 'Dashboard',
            meta: [{ name: 'description', content: 'Administration home screen. From here you have access to the configurable parts of the site.' }]
    },
    children: [

      { path: '', component: HomeComponent, data: { title: 'Dashboard' } },
      { path: 'about-page', component: AboutPageComponent, canActivateChild: [AuthGuardAdmin] },
    ],
  },

    path: '',
    component: RootComponent, canActivate: [AuthGuardAdmin],
        data: {
            title: 'Dashboard',
            meta: [{ name: 'description', content: 'Administration home screen. From here you have access to the configurable parts of the site.' }]
    },
    children: [

      { path: '', component: HomeComponent, data: { title: 'Dashboard' } },
      { path: 'about-page', component: AboutPageComponent, canActivateChild: [AuthGuardAdmin] },
    ],
  },