ng2中router-outlet用法
2024-08-29 22:44:41
说明: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>
页面显示效果:
最新文章
- CSS3的基础用法
- PCB设计规则考量之初识
- Ubuntu更改右键菜单
- Android项目实战(十五):自定义不可滑动的ListView和GridView
- POJ 1797 	Heavy Transportation (Dijkstra变形)
- iOS - ASIHTTPRequest 网络请求
- [Flex] PopUpButton系列 —— 将DataGrid作为弹出内容
- SQL Server 2000的并发连接数是多少
- virtualenv创建虚拟环境
- hdu Game of Connections
- NIO(三、Channel)
- Chrome浏览器的使用
- Windows系统还原失败心得
- authorizations.go
- ubuntu环境下实现 多线程的socket(tcp) 通信
- eclipse 界面开发--windowbuilder
- windbg排查大内存
- 潭州课堂25班:Ph201805201 django 项目 第二课 git 版本控制 (课堂笔记)
- APK优化工具zipalign的详细介绍和使用
- 解决wamp 3.0.6 访问路径出现 403 错误
热门文章
- 【PHP开发】用curl向https发请求时的35号错误
- Hadoop常见异常及其解决方式
- “volatile”这个关键字
- Greedy Function Approximation:A Gradient Boosting Machine
- indows下PHP通过ffmpeg给上传的视频截图详解
- 用JAVA 的for循环输出 菱形
- keras:Exception: Error when checking model target
- Java for LeetCode 080 Remove Duplicates from Sorted Array II
- 可视化工具与pymongo
- nodejs搭建简单的websocket服务端