【Angular4学习】--子路由

什么是子路由：

简单的说就是如果你希望可以无限制的在一个组件的内部进行多级嵌套其他组件，但是由于每层的嵌套都是以上一层为基础的，所以你在找到嵌套在内层的组件时就需要用到angular子路由来导航，当然这是相对来说的，根路由和子路由都是相对的。

子路由语法：

【Angular4学习】--子路由
当我访问home组件时，会展示home组件，当我访问xxx组件时在home组件模板上的rooteroutlet插座位置显示组件Xxx的模板内容，访问Yyy组件也一样。

子路由实现：

子路由和普通路由的配制方法大致一样，都是声明好路由的入口，路由的路径，路由的出口，不一样的是多了一个children来表面这是子路由而且可以无限循环嵌套。

1.设置根路由入口:

在模板（HTML）设置，路由入口就是点击哪里然后路由到新组件。

 <a [routerLink]="['/home',1]">进入主页</a>

2.子路由入口和出口：

子路由是[‘./**’],子路由是根路由里面套着的路由，可以无限嵌套
路由出口是新的组件将在哪里显示，入口指定什么时候加载新组建，出口指定加载完的组件在哪里显示，入口和出口都在模板里设置。

<div> <p> <span>哈哈，欢迎来到home主页！</span> <span>用户的ID是:{{homeId}}；</span> </p> <a [routerLink]="['./authoritymanage']">权限管理</a> <a [routerLink]="['./education-plan']">教学规划</a> <a [routerLink]="['./exam-manage']">考试管理</a> <a [routerLink]="['./examination-questions-manage']">试题管理</a> <a [routerLink]="['./information-manage']">信息管理</a> <a [routerLink]="['./organization-manage']">组织机构管理</a> <a [routerLink]="['./score-manage']">成绩管理</a> <a [routerLink]="['./user-manage']">用户管理</a> </div> <!--设置路由出口--> <router-outlet></router-outlet>

3.配置路由路径

当设置好了路由的入口和出口就来配置路由的路径，路径指定了当访问哪个路径的时加载哪个模板。

//路由配置
const routes: Routes = [
  { path: '',redirectTo:'/login',pathMatch:'full'},
  { path:'login',component:LoginComponent},
  { path:'home/:id',component:HomeComponent,children:[
  { path:'',component:AuthoritymanageComponent},
  { path:'education-plan',component:EducationPlanComponent},
  { path:'authoritymanage',component:AuthoritymanageComponent},  
  { path:'education-plan',component:EducationPlanComponent},
  { path:'exam-manage',component:ExamManageComponent},
  { path:'examination-questions-manage',component:ExaminationQuestionsManageComponent},
  { path:'information-manage',component:InformationManageComponent},
  { path:'organization-manage',component:OrganizationManageComponent},
  { path:'score-manage',component:ScoreManageComponent},
  { path:'user-manage',component:UserManageComponent},  
    ]},
  {path:'**',component:Code404Component},  
];

子路由示例效果：

【Angular4学习】--子路由
初始页面时是没有下面菜单的，只有home主页组件欢迎用户信息，现在我们新增了8个管理菜单，而且各个管理菜单组件的内容也展示在了home主页组件的内部，也就是说在home组件内部进行了两层的嵌套，嵌套了其他的组件，让其他组件显示在自己内部，这就是子路由达到的效果。
查看源代码
【Angular4学习】--子路由

总结

子路由其实就是相对路由，设置子路由可以让组件内无限制嵌套其他组件，也更能体现SPA单页应用的优势，与子路由并列的还有辅助路由，子路由时父子关系的相对路由，辅助路由时兄弟关系的并列路由，关于辅助路由的总结，请看小编下篇博客的分享。

秒客网