Routing 角度5布线：空路径中的空路径

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

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

如果我将FrontPageComponent的路径更改为FrontPage，则在访问localhost:4200/FrontPage时将加载它

空父路径中的空子路径似乎不起作用（顺便说一句，我已经尝试了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
       }
])

下面的方法行吗

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

试试这个：

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

---

我设法找到了一种有效的方法，惰性加载

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

---

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

嘿，这会起作用，但是我必须将到首页的路径定义为，我希望它位于根路径。我认为重定向会将它重定向到首页。localhost:4200应该加载首页。我没有尝试过，但我认为应该是这样。是的，但是首页将位于localhost:4200/首页，而不是localhost:4200/@我的答案有用吗？也许空路径父项中的空路径子项不起作用？这家伙也有问题：我必须说，这是相当令人沮丧的，因为我不能有一个包含子组件布局的根页面，当然这一定是在某个地方完成的，某种程度上是由某人完成的，但这不起作用，因为FullLayoutComponent需要是父组件，并呈现在所有人面前pages@blomster我忘了配置中的一个小细节，你能再试一次吗？我当时已经做了类似的事情。