Enrutamiento angular padre-hijo o enrutamiento anidado

Esta sección aprende sobre el enrutamiento entre padres e hijos, y los escenarios de la aplicación se muestran en el siguiente sitio web:

 Analicemos el sitio web oficial de ng. La parte superior es la barra de navegación, y la parte inferior es la barra de navegación izquierda y el contenido derecho. Continúe con nuestro aprendizaje previo de los conceptos básicos de enrutamiento. La barra de navegación superior es equivalente a implementar un en el componente raíz . Etiqueta de navegación de enrutamiento. A continuación, la barra de navegación izquierda es similar a los subcomponentes. Cuando hace clic en la barra de navegación izquierda, la información correspondiente se muestra en la sección de contenido de la derecha. Este enlace implica el enrutamiento padre-hijo que se aprenderá en esta sección (o enrutamiento anidado);

La configuración básica del enrutamiento y el proyecto de creación de CLI ya no se muestra aquí. Hay muchos sitios web similares a los escenarios de aplicación anteriores. A continuación, se muestra un breve resumen de la creación de enrutamiento entre padres e hijos:

• Configuración de enrutamiento de subcomponentes en el enrutamiento de componentes principales:

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

• El componente raíz implementa la etiqueta de navegación de la barra de menú;

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

• La etiqueta básica de la página del subcomponente, el diseño de estilo básico público es como se muestra en la figura anterior (omitida aquí);

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

Los efectos correspondientes se pueden lograr en los subcomponentes [multiplataforma], [Velocidad y rendimiento], [Principios básicos] y [Entorno básico]. Lo anterior es el proceso práctico básico para implementar el enrutamiento de componentes padre-hijo. (o enrutamiento anidado).