角度のある親子ルーティングまたはネストされたルーティング

このセクションでは、親子ルーティングについて学習します。アプリケーションのシナリオは、次のWebサイトに示されています。

ngの公式ウェブサイトを分析してみましょう。上部はナビゲーションバー、下部は左側のナビゲーションバーと右側のコンテンツです。ルーティングの基本についての以前の学習を続けます。上部のナビゲーションバーは、ルートコンポーネントにを実装するのと同じです。。ラベルルーティングナビゲーション。次に、左側のナビゲーションバーはサブコンポーネントに似ています。左側のナビゲーションバーをクリックすると、対応する情報が右側のコンテンツセクションに表示されます。このリンクには、学習する親子ルーティングが含まれます。このセクション（またはネストされたルーティング）;

CLI作成プロジェクトとルーティングの基本的な構成については、ここでは説明しません。上記のアプリケーションシナリオに類似したWebサイトが多数あります。親子ルーティングの作成の概要は次のとおりです。

親コンポーネントルーティングのサブコンポーネントルーティング構成：

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>

対応する効果は、サブコンポーネント[クロスプラットフォーム]、[速度とパフォーマンス]、[基本原則]、および[基本環境]で実現できます。上記は、親子コンポーネントルーティングを実装するための基本的な実用的なプロセスです。（またはネストされたルーティング）。

角度のある親子ルーティングまたはネストされたルーティング

おすすめ