Question

我希望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 { }

Answer 1

事实证明我两次加载了模板。

我在主appRoutes中更改了引用以删除模板：

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

为了测试起见，我将整个LayoutComponent模板HTML更改为L

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

Angular 6子组件未在LayoutComponent中打开

1 个答案: