Question

我已经按照lazy-loading-ngmodules教程进行了操作，以便我有带路由的应用模块和带路由的功能模块：

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class FeatureModule { }

app.component.html包含<router-outlet></router-outlet>

如何指定Layout组件，FeatureModule中的所有页面都将使用相同的Layout？在FeatureModule中可以有另一个router-outlet吗？

编辑：所以我修改了我的FeatureModuleRouting：

const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children:[
      {
        path: 'index',
        component: IndexComponent,
      },
      {
        path: 'about',
        component: AboutComponent,
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class FeatureRoutingModule { }

和LayoutComponent：

<h2>Feature works!</h2>

<button routerLink="index">Home</button>
<button routerLink="about">About</button>
<router-outlet name='sub'></router-outlet>

但是Index和About组件未加载到LayoutComponent中。为什么呢？

Answer 1

是的，可以通过指定名称来建立另一个路由器插座每个路由器 - oulet。

在Layout.Component.html

中

<router-outlet name="index"></router-outlet>
<router-outlet name="about"></router-outlet>

在route.ts

const routes: Routes = [
  {
    path: '/layout',
    component: LayoutComponent,
    children:[
      {
        path: '',
        component: IndexComponent,
        name:'index'
      },
      {
        path: '',
        component: AboutComponent,
        name:'about'

      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class FeatureRoutingModule { }

每当您路由到/ layout（您可以将其更改为/如果您不想路由到/ layout）时索引和关于组件加载到布局组件中。

具有路由的功能模块中的布局页面

1 个答案: