Kesalahan: Tidak dapat mencocokkan rute apa pun. Segmen URL: - Angular 2

Saya baru mengenal angular2. Saya mencoba memahami bagaimana menggunakan beberapa <router-outlet> dalam template tertentu. Saya telah melalui banyak QA di sini tetapi tidak dapat menyelesaikan kesalahan saya.

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

komponen1.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'

komponen2.html

<h3>In two</h3>

komponen3.html

<h3>In three</h3>

komponen4.html

<h3>In four</h3>

Tangkapan layar di bawah ini adalah output saya saat ini:

Ketika saya klik ...Pergi ke Dua... Dalam dua dicetak. Tetapi mengklik dua tautan lainnya memberi saya kesalahan Tidak dapat mencocokkan rute apa pun

Roman C
Pertanyaan edit 27 April 2017 в 11:57
Pemrograman
angular angular2-routing
27 April 2017 в 11:53
Belum ada tampilan
Larutan

Memecahkannya sendiri. Melakukan beberapa perubahan struktural kecil juga. Rute dari Komponen1 ke Komponen2 dilakukan oleh satu &. Komponen2 ke Komponen3 dan Komponen4 dilakukan oleh beberapa & Isi yang dihasilkan adalah:

Komponen1.html


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

Komponen2.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>

'/two' mewakili komponen induk dan ['three'] dan ['four'] mewakili tautan ke masing-masing anak komponen2

. Component3.html dan Component4.html sama seperti pada soal.

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'
        }
    ]
},];
Komentar (0)

silakan modifikasi router.module.ts Anda sebagai:

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

dan di komponen1.html Anda

<h3>In One</h3>


    <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>


                   // Successfully loaded component2.html
 // Error: Cannot match any routes. URL Segment: 'three'
  // Error: Cannot match any routes. URL Segment: 'three'
Komentar (0)