angular辅助路由（插座为平级的关系）

以一个案例说明：

最终的效果图：绿色的为聊天组件

 

下面看代码：这是在app组件上的布局文件，代码最后一行有一个别名为aux的插座，它就是用来显示聊天面板的插座。聊天组件为chat，这里还不写了，接着看路由的参数控制，当点击“开始聊天”的时候，显示aux插座中的chat组件。当点击“结束聊天”时，显示aux插座，但为空。

 

 

下面是对应的app-routing,module.ts中的辅助路由配置：代码中指明了outlet的值为aux，即chat组件显示在aux插座上，其余的路由配置中没有写outlet则表示他们都是显示在默认的插座中，就是主插座，即primary插座。

 

 

主插座：

primary代表主插座。primary在上面代码中表示：当点击“开始聊天”时，主插座中显示home组件，aux组件显示chat组件。