Angular 父子路由或嵌套路由

本节学习父子路由，应用场景如下图网站所示：

我们来分析下 ng 官网，上面部分是导航栏，下面部分分别是左侧导航栏和右边内容部分，继续我们之前的路由基础知识环节的学习，上面导航栏部分就相当于在根组件中实现 a 标签的路由导航，接下来左侧边导航栏就类似子组件，当点击左侧导航栏的时候，在右侧内容部分展示对应的信息，这个环节就涉及到本节要学习的父子路由（或者嵌套路由）；

CLI创建项目和路由的基本配置这里有不再演示，类似上面的应用场景有很多很多的网站，下面简单的总结一下创建父子路由：

父组件路由中的子组件路由配置：

const routes: Riutes =[
  //这里类比ng 特性组件路由配置
  {path:'ngtx', component:NgTxComponent,
    children:[
        {parth:'kpt',component:KptComponent}, //跨平台
        {parth:'sdxn',component:SdXnComponent}, //速度与性能
        {parth:'**',redirectTo:'kpt'} //**通配，默认显示kpt
    ]
  },
  //这里类比ng 文档组件路由配置
  {path:'ngdoc', component:NgDocComponent,
    children:[
        {parth:'jbyl',component:JbylComponent}, //基本原理
        {parth:'jbhj',component:JbhjComponent}, //基本环境
        {parth:'**',redirectTo:'jbhl'} //**通配，默认显示jbhl
    ]
  },
  {parth:'**',pathMatch:'full',redirectTo:'ngtx'} //**通配，默认显示【特性】组件
];

根组件实现菜单栏导航标签；

<!-- 【实现头部导航栏】 -->
<header>
    <nav>
        <a title="特性" [routerLink]="['/ngtx']" routerLinkActive="active">特性</a>
        <a title="文档" [routerLink]="['/ngdoc']" routerLinkActive="active">文档</a>
    </nav>
</header>
<router-outlet></router-outlet> <!--根组件挂载路由-->

子组件页面基本标签，公共基本样式布局如上图（此处省略）；

<!-- 【实现特性子组件】 -->
<article>
    <aside class="navLeft">
        <a title="跨平台" [routerLink]="['/ngtx/kpt']" routerLinkActive="active">跨平台</a>
        <a title="速度与性能" [routerLink]="['/ngtx/sdxn']" routerLinkActive="active">速度与性能</a>
    </aside>
    <section class="contentRight">
        <router-outlet></router-outlet>  <!--子组件挂载路由-->
    </section>
</article>

<!-- 【实现文档子组件】 -->
<article>
    <aside class="navLeft">
        <a title="基本原理" [routerLink]="['/ngdoc/jbyl']" routerLinkActive="active">基本原理</a>
        <a title="基本环境" [routerLink]="['/ngdoc/jbhj']" routerLinkActive="active">基本环境</a>
    </aside>
    <section class="contentRight">
        <router-outlet></router-outlet>  <!--子组件挂载路由-->
    </section>
</article>

分别在子组件【跨平台】，【速度与性能】，【基本原理】，【基本环境】中实现对应的效果即可，以上就是实现父子组件路由（或者嵌套路由）的基本实践过程。

Angular 父子路由或嵌套路由

猜你喜欢