angular--路由之辅助路由

辅助路由案例的思路:

1、在APP组件模板上再定一个插座来显示在线咨询组件


aux是辅助的意思,name里可以随便起名字



2、单独开发一个在线咨询组件,只显示在新定义的插座上

首先生成一个consult咨询组件


consult组件模板


consult组件的css样式


然后用css样式调整下主页模板和股票详情模板


主页模板
股票详情模板


在路由配置中写咨询组件的辅助路由,其中outlet指定放在哪个路由插座上

3、通过路由参数控制新的辅助插座是否显示在线咨询组件

在主页模板上添加2个链接,一个是开始咨询,一个是结束咨询


开始咨询链接中routerlink里不是写路径了,而是写路由插座信息,outlets对应路由插座是aux,aux后对应consult组件的路由路径consult。

结束咨询中aux对应的路由路径是null,表示什么都不显示

最后看看实际效果:

点击开始咨询,出现绿色咨询框。点击结束咨询,咨询框消失。


如果在开始咨询链接中routerlink里outlets后添加“primary:home”,其中primary表示主路由,这句话的意思是当点击开始咨询时,控制主路由跳转至主页上


效果如下:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、SPA的概念 首先明确一个概念,SPA,全称为Single Page Application单页应用,一个单页...
    耦耦阅读 5,996评论 0 3
  • 一:路由基础 什么是路由: 在web开发中,路由的概念由来已久,简而言之,就是利用URL的唯一性来指定特定的事物,...
    真的稻城阅读 6,035评论 2 7
  • 版本:4.0.0+2 有一些英雄指南应用的新需求: 添加一个仪表盘 视图。 添加在英雄 视图和 仪表盘 视图之间导...
    soojade阅读 1,343评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,987评论 19 139
  • 初恋之心,之始(三月) 女:这么巧啊,你也在此等人吗?。。。 男:是啊,我也在等一个人,在等一个相遇的人。。。。 ...
    美好的青春_e465阅读 504评论 0 0