角度和延迟加载:组件中的菜单，其他组件中的路由器外部

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

代码工作正常;现在，我想在标题专用组件中移动按钮菜单。但是路由器插座应该留在主页上。如何从页面 x 中的选择中将组件加载到页面 y 中的另一个路由器插座中？

Answer 1

使用菜单创建一个标题组件，然后在 app.component.html：

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