Angular 和延迟加载：组件中的菜单，其他组件中的 router-outer

Question

在我的 Angular 应用程序中，我在主组件中有一个菜单按钮列表，它会打开几个延迟加载的组件。页面代码为

<button routerLink="/lazy-loaded-page">page</button>
<router-outlet></router-outlet>

路由文件的代码是

const routes: Routes = [
  { path: 'directory', loadChildren: () => import('./modules/directory/directory.module').then(m => m.DirectoryModule) },

代码运行正常；现在，我想在 header 专用组件中移动按钮菜单。但是路由器出口应该留在主页上。我如何从页面 x 中的选择中加载页面 y 中另一个 router-outlet 中的组件？

Answer 1

用您的菜单创建一个 header 组件，然后在 app.component.html:

<app-header></app-header>
<router-outlet></router-outlet>

Angular and lazy loading: menu in a component, router-outer in other