Angular最新教程-第十一节 路由四 （嵌套路由）

今天我们继续来看路由。

这是我们关于路由的最后一节课。

嵌套路由的使用还是蛮频繁的，

使用场景

场景一：

商城类应用会有大分区里面的小分区，

虽然也可以靠携带不同的路由参数来识别，

但是他们都在同一个视图里面，就会有一个很明显的问题。

有的分类内容比较多，列表很长，有些分类内容比较少，列表很短。

当从内容丰富的分类切换到内容很少的分类的时候，

会出现，内容很少的页面，下半部分会有一大片的空白。

滚动条也保留在原来的位置。

场景二：

关于我们内容里面很大可能会存在出现下面的分类。

比如一个医院网站的关于，会有医生、护士、还有医生个人简介，

这样的带着明显嵌套逻辑的页面。

场景三：

用户个人中心。（pc页面）

我们还是拿Angular中文社区的网站来看。



从图中我们可以知道，它的用户页面的路由是

/home

。

点击切换到我的关注、我的粉丝等，路由分别是

/home/follow

、

/home/fans

。

配置路由

1、新建用户页面

$  ng generate component home

2、新建用户页面-我的主页

$ ng generate component home/main

3、新建用户页面-我的关注

$ ng generate component home/follow

4、打开src\app\home\home.component.ts

在头部导入

import { ActivatedRoute,Router,Routes } from ‘@angular/router’;

import { MainComponent } from ‘./main/main.component’;

import { FollowComponent } from ‘./follow/follow.component’;

在构造函数中注入

constructor(private router:Router,private route:ActivatedRoute) { };

定义子路由并导出

export const childRoutes:Routes=[
{path:'',redirectTo:'main',pathMatch:'full'},
{path:'main',component:MainComponent},
{path:'follow',component:FollowComponent}
]

5、打开src\app\home\home.component.html

复制src\app\app.component.html的部分代码，稍作修改。

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" [routerLink]="['./main']">我的主页</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['./follow']">我的关注</a>
</li>
</ul>
<router-outlet></router-outlet>

注意这里的

<router-outlet></router-outlet>

和主页app.component.html中的

<router-outlet></router-outlet>

是不同的。



外层的navbar控制的是红色框框的路由切换。

内层的navbar控制的是蓝色框框的路由切换。

源代码：百度云 实际代码变化较少，不更新压缩文件。

码云：https://gitee.com/xiaohuOni/oniplan-ng

有码云的帮忙给个star，感谢。

这节课的内容就到这里完成了。

感谢您的阅读。

我是莽夫，希望你开心。

如果你觉得本文对你有帮助，请扫描文末二维码，支持博主原创。

希望大家关注我的个人公众号ionic_