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>

页面显示效果：

转载于:https://www.cnblogs.com/sghy/p/6951083.html

ng2中router-outlet用法相关推荐

angular4 php,Angular4中router使用技巧
这次给大家带来Angular4中router使用技巧,Angular4中router使用的注意事项有哪些,下面就是实战案例,一起来看一下. router,也就是路由,是前端中一个比较重要的概念.通过r ...
vue-i18n中的$t用法
vue-i18n中的$t用法 $t 是 vue-i18n 提供的全局方法 1.在 main.js 中引入 vue-i18n import Vue from 'vue';import VueI18n f ...
mysql中change用法,mysql 中alter的用法以及一些步骤
mysql 中alter的用法以及一些方法在用到alter的时间,查到了这个文章,就copy下来了,详细进入下面链接: MySQL之alter语句用法总结 1:删除列 ALTER TABLE [表名 ...
mysql中正则表达式的用法_Mysql中正则表达式Regexp常见用法
Mysql中Regexp常见用法模糊匹配,包含特定字符串 # 查找content字段中包含"车友俱乐部"的记录 select * from club_content where ...
【C++】C/C++ 中 static 的用法全局变量与局部变量
C/C++ 中 static 的用法全局变量与局部变量目录 1. 什么是static? 1.1 static 的引入 1.2 静态数据的存储 2. 在 C/C++ 中static的作用 2.1 总的 ...
php foreach嵌套foreach,php中foreach怎么嵌套foreach PHP中foreach函数用法？
foreach的使用方法小编不是很明确,分享达人指教一下.foreach (array_expressforeach($array as $key) { if(xxxx) { break; //bre ...
python中str的index什么意思_python中index的用法是什么
index() 一般用处是在序列中检索参数并返回第一次出现的索引,没找到就会报错,比如:>>> t=tuple('Allen') >>> t ('A', 'l', ...
php foreach是什么,php中foreach的用法是什么
php中foreach的用法是:[foreach ($array as $value) {要执行代码;}],每进行一次循环,当前数组元素的值就会被赋值给$value变量,在进行下一次循环时,将得到数组 ...
java中的基本用法
java中的基本用法关键字:专门用途的字符串所有java关键字都是小写英文标识符 java常量 java变量 ■ 作用域:起作用的区域■ 使用前必须先声明,在赋值.使用变量名访问这块区域 jav ...
Java中getResourceAsStream的用法
Java中getResourceAsStream的用法首先,Java中的getResourceAsStream有以下几种: 1. Class.getResourceAsStream(String p ...

ng2中router-outlet用法

ng2中router-outlet用法相关推荐

最新文章

热门文章