Angular parent-child routing or nested routing

This section learns about parent-child routing, and the application scenarios are shown in the following website:

Let’s analyze the ng official website. The upper part is the navigation bar, and the lower part is the left navigation bar and the right content. Continue our previous learning of routing basics. The upper navigation bar is equivalent to implementing a in the root component. Label routing navigation. Next, the left navigation bar is similar to sub-components. When you click on the left navigation bar, the corresponding information is displayed in the right content section. This link involves the parent-child routing to be learned in this section (or Nested routing);

The basic configuration of CLI creation project and routing is no longer demonstrated here. There are many websites similar to the above application scenarios. Here is a brief summary of creating parent-child routing:

Sub-component routing configuration in parent component routing:

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'} //**通配，默认显示【特性】组件
];

The root component implements the menu bar navigation label;

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

The basic label of the sub-component page, the public basic style layout is as shown in the figure above (omitted here);

<!-- 【实现特性子组件】 -->
<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>

The corresponding effects can be achieved in the sub-components [Cross-platform], [Speed and Performance], [Basic Principles], and [Basic Environment]. The above is the basic practical process of implementing parent-child component routing (or nested routing).

Angular parent-child routing or nested routing

Guess you like