10、Angular开发：多路由出口、懒加载模块与依赖注入详解

Angular开发：多路由出口、懒加载模块与依赖注入详解

1. 多路由出口的单页应用开发

在Angular开发中，通常使用 <router-outlet> 标签来根据配置的路由渲染视图。但有时，我们需要在同一个组件中创建多个 <router-outlet> 标签。以下是一些多路由出口视图的使用场景：
- 仪表盘类单页应用 ：有多个专用区域（出口），每个区域可以一次渲染一个组件。例如，出口A可以以表格或图表形式显示股票投资组合，出口B可以显示最新新闻或广告。
- 添加聊天区域 ：在单页应用中添加聊天区域，让用户在保持当前路由激活的同时与客服代表交流。需要添加一个独立的聊天路由，使用户可以同时使用两条路由，并在它们之间切换。

在Angular中，可以通过设置主出口和命名的辅助出口来实现这些场景。以下是一个示例代码，定义了主出口和聊天出口：

<router-outlet></router-outlet>
<router-outlet name="chat"></router-outlet>

路由配置如下：

export const routes: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full'