在HTML文件中

//主路由

<router-outlet></router-outlet>

//辅助路由

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

配置

{path:'xxx',component:XxxComponent}

{path:'yyy',component:YyyComponent,outlet:"aux"}

<a [routerLink] = "['/xxx',{outlet:{aux:'xxx'}}]">Xxx</a>

<a [routerLink] = "['/yyy',{outlet:{aux:'yyy'}}]">Yyy</a>

//primary   决定主路由的路径  点击a标签主路由到Zzz组件,辅助路由到Yyy组件

<a [routerLink] = "['/yyy',{outlet:{primary:‘zzz’ aux:'yyy'}}]">Yyy</a>

angular路由详解五(辅助路由)的更多相关文章

  1. angular路由详解六(路由守卫)

    路由守卫 CanActivate: 处理导航到某个路由的情况. CanDeactivate:处理从当前路由离开的情况. Resole:在路由激活之前获取路由数据. 1.CanActivate: 处理导 ...

  2. angular路由详解三(路由参数传递)

    我们经常用路由传递参数,路由主要有三种方式: 第一种:在查询参数中传递数据 {path:"address/:id"}   => address/1  => Activa ...

  3. react router @4 和 vue路由 详解(五)react怎么通过路由传参

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 7.react怎么通过路由传参? a.通配符传参(刷新页面数据不丢失) //在定义路由的 ...

  4. react router @4 和 vue路由 详解(一)vue路由基础和使用

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 1.vue路由基础和使用 a.大概目录 我这里建了一个router文件夹,文件夹下有in ...

  5. react router @4 和 vue路由 详解(八)vue路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...

  6. react router @4 和 vue路由 详解(七)react路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 12.react路由守卫? a.在之前的版本中,React Router 也提供了类似的 ...

  7. Ocelot简易教程(三)之主要特性及路由详解

    作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9664977.html 上篇<Ocelot简易教程(二)之快速开始2>教大家如何快速跑起来一个 ...

  8. Vue 路由详解

    Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...

  9. elasticsearch系列三:索引详解(分词器、文档管理、路由详解(集群))

    一.分词器 1. 认识分词器  1.1 Analyzer   分析器 在ES中一个Analyzer 由下面三种组件组合而成: character filter :字符过滤器,对文本进行字符过滤处理,如 ...

随机推荐

  1. 使用域账号统一管理cisco网络设备

    1.思科设备和微软系统整合的背景: 公司内部有一定数量的客户端,为了实现统一化,在管理内部部署了域架构,这样可以通过组策略对客户端进行批量化管理,提高了管理的效率. 同样公司内部有一定数量的网络设备( ...

  2. 解决CXF的java.io.FileNotFoundException: class path resource [META-INF/cxf/cxf-extension-soap.xml] cannot be opened because it does not exist

    以下是错误信息 九月 25, 2017 8:22:04 下午 org.springframework.web.context.support.XmlWebApplicationContext prep ...

  3. laravel框架基础知识点

    一.数据库:DB    1.db查    DB::table('msg')->where('id','>',$id)->get()       查询单行    DB::table(' ...

  4. 利用fiddler和mock调试本地微信网页

    利用fiddler和mock调试本地微信网页 微信公众号网页是比较特殊的页面,普通页面直接打开即可访问,但对于需要请求微信相关接口的部分需要安全域名认证.这导致了使用mock数据进行开发的页面没办法走 ...

  5. Spring中的@scope注解

    默认是单例模式,即scope="singleton".另外scope还有prototype.request.session.global session作用域.scope=&quo ...

  6. Mysql根据指定字段的int值查出在当前列表的排名

    先看表结构和数据: DROP TABLE IF EXISTS `ndb_record`; CREATE TABLE `ndb_record` ( `id` bigint(20) NOT NULL AU ...

  7. scrapy的学习总结(1)

    1.xpath和css的节点的共同结合使用是一个挺好的使用过程,还有就是配合正则表达式的使用,这个也是很重要的.解决任何一个问题都会有不同方法.学会思考的解决问题. 2.item的数据抽取,pipel ...

  8. Centos安装jdk8

    1.下载jdk1.8的tar cd /usr/local/src #切换到该目录下 wget url #下载jdk8的tar包 2.下载完成后解压tar包 tar -zxvf jdk-8u152-li ...

  9. windowsXP下搭建JAVA环境教程

    一.工具准备安装JKD6:传送门:http://www.java.net/download/jdk6/6u10/promoted/b32/binaries/jdk-6u10-rc2-bin-b32-w ...

  10. VC6安装错误——Error Launching acmboot.exe

    因项目需要,我需要安装Microsoft Visual C++ Professional Version 6 SP5.但是在安装时运行安装目录下的setup.exe,出现Error Launching ...