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开始的. 语法结构: 复制代码 代 ...
随机推荐
- FAT12中,如何定位大于一个扇区(512B)的文件内容
[0]README 0.1)本文旨在于 演示在FAT12中, 如何取定位大于 512B 的文件内容,和查看它: 0.2)如何制作FAT12文件系统,以及如何向文件中添加temp.txt文件,参见: { ...
- 14、AppWidget及Launcher RemoteViews
一.Launcher的简单研究 1 什么是Launcher Android系统启动后加载的第一个程序 . 这个程序是其他应用程序的入口 . Launcher构成: HomeScreen : (Work ...
- python 基础 2.7 range与xrange的区别
#/usr/bin/python #coding=utf-8 #@Time :2017/10/25 19:22 #@Auther :liuzhenchuan #@File :range与xrange的 ...
- MySQL 5.7 等高版本关于JDBC驱动的几个问题
https://blog.csdn.net/dj673344908/article/details/85223313 mysql 5.7 用8.0版本的驱动可以,5.1版本也可以,5.5.5.6.5. ...
- inclusion_tag 看图
- Altera Quartus 13.1 仿真工具路径错误问题解决 Can't launch the ModelSim-Altera software
Altera Quartus 13.1 仿真工具路径错误问题解决 Quartus13.1 自带的ModelSim-Altera 10.1d 版本, 在做仿真时调用 ModelSim-Alteara,发 ...
- 五个知识体系之-SQL学习-第二天
创建数据:INSERT INTO userinfo(userid,username,job,level1,companyage) VALUES ('001','xl001','test','P1',' ...
- CSS各种度量单位----px、em、%、rem、vh/vw、vmin/vmax
本文主要讲下CSS中各类度量单位的意思和区别. 开发中最常用到的css单位是px.em.%.随着css3的出现,带来了更多的度量单位,这些单位为响应式开发,带来很大的好处.各种单位的浏览器兼容性可以去 ...
- Hadoop实战-Flume之Source regex_extractor(十二)
a1.sources = r1 a1.sinks = k1 a1.channels = c1 # Describe/configure the source a1.sources.r1.type = ...
- 【题解】Counting D-sets(容斥+欧拉定理)
[题解]Counting D-sets(容斥+欧拉定理) 没时间写先咕咕咕. vjCodeChef - CNTDSETS 就是容斥,只是难了一二三四五\(\dots \inf\)点 题目大意: 给定你 ...