サンズルートの使用
ただトリガーボタンにより、小型親子ルートが一般的にページ上で使用されて置き、ページ全体面積の変化の一部を変更します
上記の二つの絵を通して、あなたは明らかにパスlocalhostのを見ることができます：4200 / homeは背中のほんの一部と同じで、同じではありません
歓迎と設定の背面には、トリガーボタンをクリックし達成するように、ページ全体が同じ、右側だけではない、が、また、ハイパーリンクを経由して、過去の接続の左側にある2つのボタンで2ページの名前です。
息子ルートは、ステップ（例）を有します。
二つの成分を作成します。1.
NGグラムコンポーネント部品/ホーム
NG G成分コンポーネント/リスト
新しいサブアセンブリを作成2.（新規ではないかもしれないこの方法によれば、この新しいアプローチはサンズを区別するアセンブリより直感的になり）
グラムコンポーネント部品/ホーム/歓迎和グラムコンポーネント部品/ホーム/設定
NG G成分コンポーネント/リスト/のlistinfo和NG G成分コンポーネント/リスト/リスト
3.ルーティング設定（APP-routing.modules）
1.注入によって作成された新しいコンポーネントの導入
'../app/components/home/home.component' からインポート{HomeComponent}。
'../app/components/list/list.component' からインポート{ListComponent}。
'../app/components/home/welcome/welcome.component' からインポート{WelcomeComponent}。
'../app/components/home/setting/setting.component' からインポート{SettingComponent}。
'../app/components/list/lists/lists.component' からインポート{ListsComponent}。
'../app/components/list/list-info/list-info.component' からインポート{ListInfoComponent}。
2.ルーティング構成（ルート）であります
{パス： "ホーム"、コンポーネント：HomeComponent、
子供：[
{パス： "ウェルカム"、成分：WelcomeComponent}
{パス： "設定"、成分：SettingComponent}
{パス： "**"、redirectTo： "ようこそ"}
]
}、
{パス： "リスト"、成分：ListComponent、
子供：[
{パス： "リスト情報"、成分：ListInfoComponent}
{パス： "リスト"、成分：ListsComponent}
{パス： "**"、redirectTo： "リスト"}
]
}、
{パス： "**"、redirectTo： "ホーム"}
分析：ルート（親ルーティング）
{パス： "ホーム"、成分：HomeComponent}
{パス： "リスト"、成分：ListComponent}
{パス： "**"、redirectTo： "ホーム"}
二つの経路（ルート）
親のニーズに対応するサブ経路は、対応するネスト内に形成され、中に埋め込まれます
{パス： "ホーム"、コンポーネント：HomeComponent、
子供：[
{パス： "ウェルカム"、成分：WelcomeComponent}
{パス： "設定"、成分：SettingComponent}
{パス： "**"、redirectTo： "ようこそ"}
]
}
ルートリダイレクト {パス：「**」、redirectTo ：「ホーム」} 文の意味は次のとおりです。ネストされた時には、上記見つけることができない、デフォルトの後藤は、紫中央にも与える必要があるに対応しますデフォルトのページでは、そうでない場合は空白部分があるでしょう
対応するページの文言4.：
4-1。（書かれたページとapp.component.htmlで）
<ヘッダクラス=「ヘッダ」>
<のdivクラス= "コンテンツ">
<P>
<a [routerLink]="['/home' ]" routerLinkActive="active">首页する</a>
</ P>
<P>
<a [routerLink]="['/list' ]" routerLinkActive="active">商品</a>の
</ P>
</ div>
</ヘッダ>
<ルータ・コンセント> </ルータ、アウトレット>
4-1-1 app.component.scss（ここでは、私は事前に書かれたSCSSを使用します）
。ヘッダ{
幅：100％; 高さ：30PX; 行の高さ：30PX; 背景：＃000;
P {幅：100pxに、フロート：左;
{色：#FFF;}
}
}
4-2。home.component.htmlとlist.component.htmlで
<のdivクラス= "コンテンツ">
<DIV CLASS = "左">
<P> <a [routerLink]="['/home/welcome' ]" routerLinkActive="active">欢迎首页する</a> </ P>
<P>
<a [routerLink]="['/home/setting' ]" routerLinkActive="active">系统设置する</a>
</ P>
</ div>
<のdivクラス= "右">
<ルータ・コンセント> </ルータ、アウトレット>
</ div>
</ div>
コメント：右は変更する必要があるので、なぜ右の書き込みは、ルータ・アウトレットであり、我々はだけなので、ここで、上を通過ルーティング、動的に（コンテンツ配信サブルーティングサブアセンブリ）このラベルのコンテンツを使用することができますあなたは、<ルータアウトレット> </ルータ・コンセント>に記述する必要があります
4-2-2 home.component.scss和list.component.scss中
.content {幅：100％;高さ：500pxなど。表示：フレックス。
.LEFT {幅：200pxの。フロート：左; 高さ：500pxなど;ボーダー右：1pxの固体#eee。
P {高さ：30px; 行の高さ：30px;}
}
.RIGHT {フレックス：1ピクセル;}
}
4-3 setting.component.html welcome.component.htmlリスト-info.component.html lists.component.html 4つのサブアセンブリのコンテンツは、書き込みに書かれています
5.ngは、プロジェクトの実現を実行するのに役立ちます