ng2中router-outlet用法
说明: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用法的更多相关文章
- ng2中的ng-content用法
用途:1.ng-content用于在组件中嵌入内容 2.ng-content可以在组件中嵌入模板代码,方便定制可复用的组件 select属性支持css选择器,如"#id",&quo ...
- Vuex中mapState的用法
Vuex中mapState的用法 今天使用Vuex的时候遇到一个坑,也可以说是自己的无知吧,折腾了好久,终于发现自己代码的错误了.真是天雷滚滚~~~~~~ index.js import Vue ...
- [转载]C#中MessageBox.Show用法以及VB.NET中MsgBox用法
一.C#中MessageBox.Show用法 MessageBox.Show (String) 显示具有指定文本的消息框. 由 .NET Compact Framework 支持. MessageBo ...
- C#中string.format用法详解
C#中string.format用法详解 本文实例总结了C#中string.format用法.分享给大家供大家参考.具体分析如下: String.Format 方法的几种定义: String.Form ...
- SQL中distinct的用法
SQL中distinct的用法 1.作用于单列 2.作用于多列 3.COUNT统计 4.distinct必须放在开头 5.其他 在表中,可能会包含重复值.这并不成问题,不过,有时您也许希望仅仅列出 ...
- Oracle 中 decode 函数用法
Oracle 中 decode 函数用法 含义解释:decode(条件,值1,返回值1,值2,返回值2,...值n,返回值n,缺省值) 该函数的含义如下:IF 条件=值1 THEN RETURN(翻译 ...
- jQuery中Animate进阶用法(一)
jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...
- [转载]js中return的用法
一.返回控制与函数结果,语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 二.返回控制,无函数结果,语法为:return; 在大多数情况下,为事件处理函 ...
- js中this的用法
经过近几周的模拟面试题,我查询了一些资料,今天就来说说,在js中this的用法吧.方法有四:第一,用作全局变量,第二,用作表该对象,第三,用作构造函数,第四,用作call和applay
- jQuery中eq()方法用法实例
本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...
随机推荐
- 进程间的八种通信方式----共享内存是最快的 IPC 方式
1.无名管道( pipe ):管道是一种半双工的通信方式,数据只能单向流动,而且只能在具有亲缘关系的进程间使用.进程的亲缘关系通常是指父子进程关系. 2.高级管道(popen):将另一个程序当做一个新 ...
- TP 上传excel
<?php class ExcelAction extends Action{ public function read($filename,$encode='utf-8'){ vendor(' ...
- 【PHP开发】用curl向https发请求时的35号错误
放了个假发现以前写的程序的模拟登陆不管用了,中间输出,发现curl向https发请求时没有返回数据,输出错误信息,得到: curl_errno($ch) -----> 35 curl_error ...
- 【PHP开发】远程文件(图片)下载
这一篇文章介绍的方法不算原创了,只是引用的别人的文章,加上自己的注释,因为接触php时间不长,所以尝试的东西比较多,自己加的注释也比较简单,php高手请略过. 我要用到远程下载图片,是在做微信公众平台 ...
- web前端开发-Ajax(1)
1.简单简绍Ajax的功能 Ajax是处于前端和后端之间的这么一个东西,他可以拿到你前端form的内容,并且在你触发Ajax的时候,先将某些数据发送到服务器端,等接受到服务器 返回的数据时,执行某个函 ...
- AndroidUI组件之ImageSwitcher
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/gc_gongchao/article/details/25594669 今天继续AndroidUI组 ...
- keras: 在构建LSTM模型时,使用变长序列的方法
众所周知,LSTM的一大优势就是其能够处理变长序列.而在使用keras搭建模型时,如果直接使用LSTM层作为网络输入的第一层,需要指定输入的大小.如果需要使用变长序列,那么,只需要在LSTM层前加一个 ...
- 设置sudo的过期时间
默认sudo的过期时间过短,经常要输入密码 sudo visudo Defaults env_reset找到这行代码 后面加上timestamp_timeout参数,数值是分钟 ,timestamp_ ...
- [2018-10-10]记录一下Vue的一个问题
最近用vue typescript SPA 做管理后台(ABP官网导出的vue项目模板),遇到一个错误,找了好久,虽然有相关资料,但发现都没解决,这里自己记录一下. Failed to mount c ...
- 让我们再谈谈 iOS 安全
前言 安全方面的话题总是聊不完的.这不,国外一家有名的专门攻击别人的安全公司 Hacking Team 自己被 Hack 了,结果有 400 多 G 的攻击资料泄漏出来,包括一些 0-day 的漏洞. ...