私は angular2 の初心者です。特定のテンプレートで複数の<router-outlets>
を使用する方法を理解しようとしています。こちらのQAをたくさん見ましたが、私のエラーを解決できませんでした。
ルーター.モジュール.ts.
const routes: Routes = [
{
path: '',
redirectTo: 'one',
pathMatch: 'full'
},
{
path: 'two',
component: ClassTwo, children: [
{
path: 'three',
component: ClassThree,
outlet: 'nameThree',
},
{
path: 'four',
component: ClassFour,
outlet: 'nameFour'
}
]
},];
コンポーネント1.html
<h3>In One</h3>
<nav>
<a routerLink="/two" class="dash-item">...Go to Two...</a>
<a routerLink="/three" class="dash-item">... Go to THREE...</a>
<a routerLink="/four" class="dash-item">...Go to FOUR...</a>
</nav>
<router-outlet></router-outlet> // Successfully loaded component2.html
<router-outlet name="nameThree" ></router-outlet> // Error: Cannot match any routes. URL Segment: 'three'
<router-outlet name="nameFour" ></router-outlet> // Error: Cannot match any routes. URL Segment: 'three'
component2.html
<h3>In two</h3>
component3.html
<h3>In three</h3>
component4.html
<h3>In four</h3>
下のスクリーンショットは、私の現在の出力です。 を参照してください。
...Go to Two...をクリックすると、In twoと出力されます。 しかし、他の2つのリンクをクリックすると、エラー Cannot match any routes が表示されます。
自分で解決しました。いくつかの小さな構造的な変更も行いました。Component1からComponent2へのルートは、単一の<router-outlet>
によって行われます。Component2からComonent3とComponent4へのルートは、複数の<router-outlet name= "xxxx">
によって行われます。 その結果、コンテンツは:
Component1.html です。
<nav>
<a routerLink="/two" class="dash-item">Go to 2</a>
</nav>
<router-outlet></router-outlet>
Component2.html
<a [routerLink]="['/two', {outlets: {'nameThree': ['three']}}]">In Two...Go to 3 ... </a>
<a [routerLink]="['/two', {outlets: {'nameFour': ['four']}}]"> In Two...Go to 4 ...</a>
<router-outlet name="nameThree"></router-outlet>
<router-outlet name="nameFour"></router-outlet>
は親コンポーネントを表し、['/two'
は親コンポーネントへのリンク、['three'
と['four'
はcomponent2のそれぞれの子コンポーネントへのリンクを表します。
router.module.tsをご覧ください。
const routes: Routes = [
{
path: '',
redirectTo: 'one',
pathMatch: 'full'
},
{
path: 'two',
component: ClassTwo, children: [
{
path: 'three',
component: ClassThree,
outlet: 'nameThree'
},
{
path: 'four',
component: ClassFour,
outlet: 'nameFour'
}
]
},];
のように変更してください。
const routes: Routes = [
{
path: '',
redirectTo: 'one',
pathMatch: 'full'
},
{
path: 'two',
component: ClassTwo, children: [
{
path: 'three',
component: ClassThree,
outlet: 'nameThree',
},
{
path: 'four',
component: ClassFour,
outlet: 'nameFour'
},
{
path: '',
redirectTo: 'two',
pathMatch: 'full'
}
]
},];
そして、あなたの component1.html で
<h3>In One</h3>
<nav>
<a routerLink="/two" class="dash-item">...Go to Two...</a>
<a routerLink="/two/three" class="dash-item">... Go to THREE...</a>
<a routerLink="/two/four" class="dash-item">...Go to FOUR...</a>
</nav>
<router-outlet></router-outlet> // Successfully loaded component2.html
<router-outlet name="nameThree" ></router-outlet> // Error: Cannot match any routes. URL Segment: 'three'
<router-outlet name="nameFour" ></router-outlet> // Error: Cannot match any routes. URL Segment: 'three'