首页 文章

Angular 6子组件不在LayoutComponent中打开

提问于
浏览
0

我希望HomeComponent是一个在布局模板中打开的子组件(在LayoutComponent的router-outlet标签内) . 我没有收到任何错误,主页加载正常 . 它不在布局中 .

这是app.module.ts的片段:

...
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    RouterModule.forRoot(appRoutes, { useHash: false, initialNavigation: 'enabled' }),
...

这是主应用程序路线的开始 . HomeComponent在PagesModule中:

export const appRoutes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      {
        path: '',
        loadChildren: '../app/pages/pages.module#PagesModule',
      }
    ]
  },
...

pages.routing.ts:

export const PageRoutes: Routes = [
 // { path: '', component: HomeComponent }, // tried this too
  {
    path: '',
    component: LayoutComponent,
    children: [
      {  path: '', component: HomeComponent }
    ]
  }
];

pages.modules.ts:

... 
@NgModule({
  imports: [
    CommonModule,
    JsonpModule,
    AppCommonModule,
    RouterModule.forChild(PageRoutes)
  ],
  exports: [ ],
  declarations: [ HomeComponent ]
})
export class PagesModule { }

1 回答

  • 0

    事实证明我正在加载模板两次 .

    我更改了主appRoutes中的引用以删除模板:

    {
        path: '',
        loadChildren: '../app/pages/pages.module#PagesModule',
      },
    

    为了测试,我将整个LayoutComponent模板HTML更改为L.

    <p>it works</p>
    <router-outlet></router-outlet>
    

相关问题