Angular实现路由的嵌套 父子路由 从浅入深

1. 配置路由

a.首先在创建angular项目时创建带路由的项目：

b.带路由项目的差别：

c.在app.component.html文件中多了可以动态插入路由的标签：

d.下面先创建三个组件，用于实现路由跳转

e.在app-routing.module.ts中配置路由

f.编写代码测试路由是否配置成功

<!-- app.component.html >
<div class="header">
    <a [routerLink]="['/news']" >新闻 </a>
    <a [routerLink]="['/shopping']" >购物 </a>
    <a [routerLink]="['/pay']" >支付 </a>
</div>

<router-outlet></router-outlet>


<!-- app.component.css>
.header{
    width:100%;
    height: 60px;
    background-color:antiquewhite;
}
a{
    padding:0px 180px;
    text-decoration: none;
    font-size: 30px;
}

g.运行项目

h.点击任一链接进行路由跳转

简单的路由就是这样实现，继续往下面看。

2. 路由重定向

看上面的第g点，我们访问localhost:4200端口时，页面只显示了三个导航条，下面什么内容都没有，这显然是不够合理的，我们访问网站时，在我们未点击任意链接时，往往下面也会加载默认的内容，那我们想要实现这功能，则通过路由重定向实现。
a.在app-routing.module.ts中添加配置

b.访问localhost:4200

3. 路由选中

上面三个链接，我们在点击一个链接后，我们只能通过下面加载的信息来判断我们点击了哪个链接，那我们如何直接看链接的效果来判断哪个链接已点击？
a.在每个< a > 标签中添加routerLinkActive属性即可


b.点击查看效果

4. 路由的嵌套

什么叫父子路由？
angular的官方文档就是使用了父子路由实现的。

a.为了粗略实现这样的功能，我们另外添加四个组件协助实现

b.记住：要去配置路由

c.去实现类似angular文档的布局

d.给布局添加一些简单样式：

e.查看实际效果

几乎实现了类似于angular文档的布局。