辅助路由

image.png

辅助路由的功能就是控制多个router-outlet 进行显示多个组件 我们要使用辅助路由来完成一个小型的功能就是 我们在任何的界面都可以有一个聊天的界面进行聊天 当我们切换不同的组件的时候聊天界面组件并不会消失 而聊天的界面组件仅仅通过开始聊天和结束聊天而进行开启和关闭 要实现这个功能就必须用辅助路由进行完成 下面是要实现的效果图 ：

image.png

完成小案例的实现思路如下图 ：

image.png

1.首先我们创建一个 聊天的组件 ng g component chat

2. 我们在product 组件里面再加入一个 router-outlet

image.png

3.同时我们要在路由列表中加入一个路由路径 并且在后面加入 outlet 属性来指定上面定义的那个 router-link

image.png

4.接线来我们 在product 模板中加入下面两行代码 *********请仔细看清 routerLink里面的写法

image.png

5. 下面的截图就是 点击开始聊天之后的浏览器的地址路径

image.png

6.如果我们想要完成一个功能就是当我们点击 开始聊天的时候 一定要跳转到 home组件下，我们可以修改 模板代码如下 ：

image.png