辅助路由案例的思路:
1、在APP组件模板上再定一个插座来显示在线咨询组件
2、单独开发一个在线咨询组件,只显示在新定义的插座上
首先生成一个consult咨询组件
然后用css样式调整下主页模板和股票详情模板
在路由配置中写咨询组件的辅助路由,其中outlet指定放在哪个路由插座上
3、通过路由参数控制新的辅助插座是否显示在线咨询组件
在主页模板上添加2个链接,一个是开始咨询,一个是结束咨询
开始咨询链接中routerlink里不是写路径了,而是写路由插座信息,outlets对应路由插座是aux,aux后对应consult组件的路由路径consult。
结束咨询中aux对应的路由路径是null,表示什么都不显示
最后看看实际效果:
点击开始咨询,出现绿色咨询框。点击结束咨询,咨询框消失。
如果在开始咨询链接中routerlink里outlets后添加“primary:home”,其中primary表示主路由,这句话的意思是当点击开始咨询时,控制主路由跳转至主页上
效果如下: