>Parent child routing such as side menu project,technological process is here ,so see it
>first of all, we need load the root-router
~~~
const routes: Routes = [
{path:"", redirectTo:'/home',pathMatch:"full"},
{path:'mode1',component:Mode1Component,children:[
{path:"home1", component:Home1Component}
]},
]
~~~
>we see it , here are first layer routing, it can load component or not , in the matter of fact ,I suppose you'd better load component as left side menu.
>Secondly, We need mount child router table, edit the mode1.component.html
~~~
<p>mode1 works!</p>
<div style="left: 0;width: 30%;float: left;background-color: cadetblue">
<ul>
<li>
<a [routerLink]='["home1"]'>点击去home1</a>
</li>
</ul>
</div>
<div style="background-color: bisque;float: left;width: 70%">
<p>子路由</p>
<router-outlet></router-outlet>
</div>
~~~
![](https://img.kancloud.cn/f5/cc/f5cc12a34facea242fd1a1c94e5b1999_734x545.png)
- 引言
- 安装angular9
- 入门
- 数据绑定
- 属性绑定
- 实体字符和转义
- html 模板运算
- css样式规范
- 数组与循环ngFor
- 条件ngIf
- 管道
- 事件执行
- 双向数据绑定mvvm
- todolist页面交互
- 公共服务层
- 数据持久化
- dom与ViewChild装饰器
- 父子组件传值
- 子父组件传值ViewChild
- 子父组件out装饰器
- 生命周期-挂/卸载
- es6语法io异步promise
- Rxjs异步数据流编程
- http_request
- axios异步数据
- 英雄route路由
- 动态route路由
- navigate route
- Parent child routing
- modularization
- lazyload