[解決済み】エラー。どのルートにもマッチしません。URLセグメント： - Angular 2

質問

angular2初心者です。私は、複数の <router-outlets> を特定のテンプレートで使用することができます。私はここで多くのQAを経験しましたが、私のエラーを解決することができませんでした。

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'
        }
    ]
},];

component1.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... 2で が出力されます。 しかし、他の2つのリンクをクリックすると、エラーが発生します。 どのルートにもマッチしない

解決方法は？

自分で解決しました。小さな構造的な変更も行いました。ルート コンポーネント1 から コンポーネント2 は、1つの <router-outlet> . コンポーネント2 から コンポーネント3 と コンポーネント4 は、複数の <router-outlet name= "xxxxx"> その結果、コンテンツは:

Component1.html

<nav>
    <a routerLink="/two" class="dash-item">Go to 2</a>
</nav>
    <router-outlet></router-outlet>

コンポーネント2.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 のそれぞれの子へのリンクを表します。 . Component3.htmlとComponent4.htmlは質問と同じです。

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'
        }
    ]
}];