2つのルーティング（ナビゲーションバーの切り替え）の角度の設定

ナビゲーション

詳細な手順

1、角度のプロジェクトを作成します

ng new angualrdemo08 --skip-install

プロジェクトにcd angular08、およびパッケージの多様性をダウンロードしてください。使用npm iまたはcnpm iコマンド

図2に示すように、必要なコンポーネントを作成します

ng g component home
ng g component new
ng g component header
ng g component home/asideone
ng g component home/asidetwo
ng g componenthome/asidethree等

図3に示すように、APP-routing.module.tsルーティング設定を見つけます

コンポーネントコマンドで作成され、自動的にご紹介しますapp.module.ts、ファイルをコピーし、これらのパスをペーストapp-routing.module.tsに、一例として、ファイルのペーストのこの部分をapp-routing.module.tsファイル：

import { HomeComponent } from './home/home.component'; 
import { NewComponent } from './new/new.component';
import { NewscontentComponent } from './newscontent/newscontent.component';
import { HeaderComponent } from './header/header.component';

ルートの追加

const routes: Routes = [
  { path: '', redirectTo: '/header',  pathMatch: 'full' },//默认路径
  { path:'header', component: HeaderComponent },
  { path:'home',   component: HomeComponent},
  { path:'new', component: NewComponent },
  { path:'newscontent', component: NewscontentComponent },
  { path: '**', redirectTo: 'header'}
];

4、ルートコンポーネントテンプレートapp.component.html設定されたルータ出口経路表示ダイナミックローディングを見つけます

<h1>
<a routerLink="/home">首页</a>
<a routerLink="/news">新闻</a>
</h1>
<router-outlet></router-outlet>

このように、ルーティング設定が終了してしまいます

二つの経路

1、ルーティング構成APP-routing.module.ts導入手段

私は2つのincomingディレクトリの導入で作成したアセンブリを配置する、上記のステップ3を参照してください。

import { OneComponent } from './home/one/one.component';
import { TwoComponent } from './home/two/two.component';
import { ThreeComponent } from './home/three/three.component';

ルーティングの設定（違い、フォーカス）

子どもたちは、キーワードを変更することはできません
ルートを追加し、誰に、サブルーティング年に書いた、とここで私は、プリルーティングのための自然な家で、ジャンプページのホームページで、家庭へのサブルートを書きました

{ path: '', redirectTo: '/header',  pathMatch: 'full' },
  { path:'header', component: HeaderComponent },
  { path:'home', 
  	component: HomeComponent,
	children:[
    	 { path:'home/asideone', component: OneComponent },
   		 { path:'home/asidetwo', component: TwoComponent },
  		 { path:'home/asidethree', component: ThreeComponent }
  	] 
  },

動的ローディング経路を表示するように構成された2、ルータ出口

ページの自宅で

<div class="aside">
        <ul>
            <li>
                <a routerLink="home/asideone" nzSelected>1</a>
            </li>
            <li>
                <a routerLink="home/asidetwo">2</a>
            </li>
            <li>
                <a routerLink="home/asidethree">3</a>
            </li>
        </ul>
    </div>
    <div class="main">
        <router-outlet></router-outlet>
    </div>