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

问题描述

我正在使用Angular 5，试图将空路径子路径加载到空路径父布局路径中。当我访问localhost：4200 / why-us时，FullLayoutComponent始终会加载，而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路由：空路径内的空路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！