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
Memecahkannya sendiri. Melakukan beberapa perubahan struktural kecil juga. Rute dari Komponen1 ke Komponen2 dilakukan oleh satu &<router-outlet>
. Komponen2 ke Komponen3 dan Komponen4 dilakukan oleh beberapa &<router-outlet name= "xxxxx">
Isi yang dihasilkan adalah:
Komponen1.html
<nav>
<a routerLink="/two" class="dash-item">Go to 2</a>
</nav>
<router-outlet></router-outlet>
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>
<router-outlet name="nameThree"></router-outlet>
<router-outlet name="nameFour"></router-outlet>
'/two'
mewakili komponen induk dan ['three']
dan ['four']
mewakili tautan ke masing-masing anak komponen2
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'
}
]
},];
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>
<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'