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开始的. 语法结构: 复制代码 代 ...
随机推荐
- java 多参实现
package com.northeasttycoon.monitor.service; import static java.lang.System.out; /** * Created by no ...
- LA 3882 And Then There Was One[约瑟夫问题的变形]
And Then There Was One UVALive - 3882 Sample Input Sample Output //设f[i]为(原约瑟夫问题)第i次要删除的标号 #includ ...
- EasyPlayer Android RTSP播放器延迟再优化策略
EasyPlayer延迟再优化策略 EasyPlayer是一款专门针对RTSP协议进行过优化的播放器.其中两个我们引以为傲的的优点就是起播快和低延迟.最近我们遇到一些需求,其对延迟要求非常苛刻,于是我 ...
- java基本类型和包装类的区别(转)
int 是基本类型,直接存数值 Integer是类,产生对象时用一个引用指向这个对象 Java把内存划分成两种:一种是栈内存,另一种是堆内存 在函数中定义的一些基本类型的变量和对象的引用变量都是在函数 ...
- python自动化运维六:paramiko
paramiko是基于python实现的SSH2远程安全连接,支持认证以及密钥方式,可以实现远程命令执行,文件传输,中间SSH代理等功能.也就是采用SSH的方式进行远程访问.SSH登陆的方式可以参考之 ...
- ubuntu 更新软件命令
安装软件最好加权限(sudo) --default-timeout=100 设置超时时间100秒 install -U setuptools 表示更新安装setuptools sudo pip3 -- ...
- Ruby 打印
puts: 输出内容自动换行,转义后再输出(转义符),可传递多个参数puts("this is ge num=",a,"this is b=",b) pri ...
- 7-6 公路村村通(30 分) 【prime】
7-6 公路村村通(30 分) 现有村落间道路的统计数据表中,列出了有可能建设成标准公路的若干条道路的成本,求使每个村落都有公路连通所需要的最低成本. 输入格式: 输入数据包括城镇数目正整数N(≤10 ...
- spring 路径配置通配符是如何实现的
在spring的配置文件中.经常看见类似这样的配置路径: classpath:/com/module/**/*sql.xml 系统会根据配置路径自动加载符合路径规则的xml文件. Spring还提供了 ...
- LVS与Keepalived
lvs与Nginx区别 LVS的负载能力强,因为其工作方式逻辑非常简单,仅进行请求分发,而且工作在网络的第4层,没有流量,所以其效率不需要有过多的忧虑. LVS基本能支持所有应用,因为工作在第4层,所 ...