Angular 5 Routing:空路径内的空路径 [英] Angular 5 Routing : Empty path inside empty path

问题描述

我正在使用 Angular 5，尝试将空路径子路由加载到空路径父布局路由中.FullLayoutComponent 总是加载，当我访问 localhost:4200/why-us 时，WhyUsComponent 组件加载.

I'm using Angular 5, trying to load a empty-path child route into a empty-path parent layout route. The FullLayoutComponent always loads, and the WhyUsComponent component loads when I visit localhost:4200/why-us.

但是当我访问 localhost:4200 时我无法加载 FrontpageComponent

But I cannot get the FrontpageComponent to load when I visit localhost:4200

如果我将 FrontPageComponent 的路径更改为 front-page，它会在我访问 localhost:4200/front-page 时加载.

If I change the path for FrontPageComponent to front-page, it will load when I visit localhost:4200/front-page.

似乎空父路径中的空子路径不起作用(我已经尝试了 pathMatch btw 的所有组合)

It seems like empty child path inside empty parent path doesn't work (i've tried all combinations of pathMatch btw)

我需要在我的网站的根目录加载 FrontpageComponent，没有任何定义的路径.

I need to the FrontpageComponent to load at the root of my site, without any defined path.

RouterModule.forRoot([
        {
            path: '',
            component: FullLayoutComponent,
            children: [
                {
                    path: '',
                    component: FrontpageComponent,
                    pathMatch: 'full',
                    data: {
                        meta: {
                            title: '',
                            description: ''
                        }
                    }
                },
                {
                    path: 'why-us', component: WhyUsComponent, pathMatch: 'full',
                    data: {
                        meta: {
                            title: 'Why Us?',
                            description: 'Why would you choose us? '
                        }
                    }
                }] // close children
       }
])

推荐答案

我设法找到了一种有效的方法，延迟加载

I managed to find a way that works, lazy loading

RouterModule.forRoot([
        {
            path: '',
            component: FullLayoutComponent,
            loadChildren: 'path/to/my.module#MyModule'
}

在 MyModule 中，我定义了我的路由，包括带有空字符串的根路径.

and in MyModule, I have my routes defined, including the root path with an empty string.

这篇关于Angular 5 Routing:空路径内的空路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！