说明:router-outlet 是应用中的路由插座,一个页面中可以使用一个或多个router-outlet

1.只使用一个router-outlet

父组件:

<router-outlet></router-outlet>

子组件:

<p>123456</p>

页面显示:

2.单页面使用两个router-outlet(多个和两个原理相同)

父组件html:

<div style="font-size:20px;">
<router-outlet name="left"></router-outlet>
</div>
<div style="color:red;">
<router-outlet name="right"></router-outlet>
</div> <--这里name对应的left和right必须和module里面的outlet相对应-->

父组件module:

export const rou:Routes = [
{
path:'',
component:LeftComponent,
outlet:'left'
},
{
path:'',
component:RightComponent,
outlet:'right'
}
]

子组件left:

<p>123456<p>

子组件right:

<p>654321</p>

页面显示效果:

ng2中router-outlet用法的更多相关文章

  1. ng2中的ng-content用法

    用途:1.ng-content用于在组件中嵌入内容 2.ng-content可以在组件中嵌入模板代码,方便定制可复用的组件 select属性支持css选择器,如"#id",&quo ...

  2. Vuex中mapState的用法

    Vuex中mapState的用法   今天使用Vuex的时候遇到一个坑,也可以说是自己的无知吧,折腾了好久,终于发现自己代码的错误了.真是天雷滚滚~~~~~~ index.js import Vue ...

  3. [转载]C#中MessageBox.Show用法以及VB.NET中MsgBox用法

    一.C#中MessageBox.Show用法 MessageBox.Show (String) 显示具有指定文本的消息框. 由 .NET Compact Framework 支持. MessageBo ...

  4. C#中string.format用法详解

    C#中string.format用法详解 本文实例总结了C#中string.format用法.分享给大家供大家参考.具体分析如下: String.Format 方法的几种定义: String.Form ...

  5. SQL中distinct的用法

    SQL中distinct的用法   1.作用于单列 2.作用于多列 3.COUNT统计 4.distinct必须放在开头 5.其他 在表中,可能会包含重复值.这并不成问题,不过,有时您也许希望仅仅列出 ...

  6. Oracle 中 decode 函数用法

    Oracle 中 decode 函数用法 含义解释:decode(条件,值1,返回值1,值2,返回值2,...值n,返回值n,缺省值) 该函数的含义如下:IF 条件=值1 THEN RETURN(翻译 ...

  7. jQuery中Animate进阶用法(一)

    jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...

  8. [转载]js中return的用法

    一.返回控制与函数结果,语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 二.返回控制,无函数结果,语法为:return;  在大多数情况下,为事件处理函 ...

  9. js中this的用法

    经过近几周的模拟面试题,我查询了一些资料,今天就来说说,在js中this的用法吧.方法有四:第一,用作全局变量,第二,用作表该对象,第三,用作构造函数,第四,用作call和applay

  10. jQuery中eq()方法用法实例

    本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...

随机推荐

  1. Android-DrawerLayout介绍

    DrawerLayout已经出来非常久了,个人认为国内的app都深受ios的毒害在设计上都争先模仿ios的风格,都忘了什么是独特的Android风格.自己得先学的然后跟产品争取在项目中使用上一系列的A ...

  2. 【BZOJ4399】魔法少女LJJ 线段树合并

    [BZOJ4399]魔法少女LJJ Description 在森林中见过会动的树,在沙漠中见过会动的仙人掌过后,魔法少女LJJ已经觉得自己见过世界上的所有稀奇古怪的事情了LJJ感叹道“这里真是个迷人的 ...

  3. vs2013工程技巧

    1 vs工程输出了dll和lib,分别是什么,有什么用? 当设置工程property的Project Defaults的Configuration Type为dll时,不光会生成该动态链接库的dll文 ...

  4. vscode设置默认shell 快速到行

    vscode设置默认shell - CSDN博客 https://blog.csdn.net/butterfly5211314/article/details/78944805 在文件 -> 首 ...

  5. VC里OnPaint几点要注意的地方(没有invalidate,系统认为窗口没有更新的必要,于是就对发来的WM_PAINT消息不理不睬)

    写在属于自己的体会,哪怕只是一点点,也是真的懂了.否则有那么多书,如果只是不过脑子的学一遍看一遍,又有谁真的掌握了这些知识呢? 这样你或许就明白了为什么不能直接用SendMessage和PostMes ...

  6. Intellij Idea生成JavaDoc

    JavaDoc是一种将注释生成HTML文档的技术,生成的HTML文档类似于Java的API,易读且清晰明了.在简略介绍JavaDoc写法之后,再看一下在Intellij Idea 中如何将代码中的注释 ...

  7. 【docker】学习笔记一:制作自己的centos6.9镜像

    前言: 最近开始研究docker,在这里做一个记录. 本来开始想用centos7系列做镜像,毕竟是最新版本的centos,但是centos7有一个严重的bug,就是正常启动的镜像不能使用systemc ...

  8. 剑指Offer:二叉树打印成多行【23】

    剑指Offer:二叉树打印成多行[23] 题目描述 从上到下按层打印二叉树,同一层结点从左至右输出.每一层输出一行. 题目分析 Java题解 package tree; import java.uti ...

  9. mysql服务突然不能启动

    mysql之前一直用的好好的,今天突然不能启动.前几天改过my.ini文件,在[mysqld]下添加了default-character-set=utf8.查看日志发现是添加的那句话的错误,删除.并且 ...

  10. Flash+XML前后按钮超酷焦点图

    在线演示 本地下载