Angular 5 路由：空路径中的空路径

Question

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

时加载

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

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

似乎空父路径中的空子路径不起作用（顺便说一句，我已经尝试了 pathMatch 的所有组合）

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

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
       }
])

Answer 1

下面的方法行得通吗？

RouterModule.forRoot([
    {
        path: '',
        component: FullLayoutComponent,
        children: [
            {
                path: '',
                redirectTo: 'front-page'
                component: FrontpageComponent,
                pathMatch: 'full',
                data: {
                    meta: {
                        title: '',
                        description: ''
                    }
                }
            },
            {
                path: 'front-page',
                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
   }
])

Answer 2

试试这个：

    {
            path:'',
            pathMatch: 'prefix',
  //this will load your page in the router inside your main page        
            children:[
                    {
                    path: '',
                    component: FrontpageComponent,
                    pathMatch: 'full' 
                },
//This will load your main component
                {
                    path: '',
                    component: FullLayoutComponent
                },
                {
                    path: 'why-us',
                    component: WhyUsComponent,
                    pathMatch: 'full'
                }
            ]

        }

在路由模块中路由下方的代码：

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
    providers: [ {
        provide: LocationStrategy, 
        useClass: PathLocationStrategy} ]
})

Answer 3

我设法找到了一种可行的方法，延迟加载

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

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

Angular 5 路由：空路径中的空路径

Angular 5 Routing : Empty path inside empty path

routing

angular5