Ich bin neu in angular2. Ich versuche zu verstehen, wie man mehrere "Router-Outlets" in einer bestimmten Vorlage verwenden. Ich habe durch viele QA hier gegangen, aber couldn' t meinen Fehler zu beheben.
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'
}
]
},];
komponente1.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'
komponente2.html
<h3>In two</h3>
komponente3.html
<h3>In three</h3>
komponente4.html
<h3>In four</h3>
Der folgende Screenshot zeigt meine aktuelle Ausgabe:
Wenn ich auf ...Go to Two... klicke, wird In two ausgegeben. Aber wenn ich auf die anderen beiden Links klicke, erhalte ich die Fehlermeldung Kann keine Route zuordnen.
Ich habe es selbst gelöst. Habe auch einige kleine strukturelle Änderungen vorgenommen. Die Route von Komponente1 zu Komponente2 wird von einem einzigen <router-outlet>
durchgeführt. Der Weg von Komponente2 zu Komponente3 und Komponente4 erfolgt über mehrere <router-outlet name= "xxxxx">
Die resultierenden Inhalte sind:
Komponente1.html
<nav>
<a routerLink="/two" class="dash-item">Go to 2</a>
</nav>
<router-outlet></router-outlet>
Komponente2.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>
Das '/zwei'
steht für die übergeordnete Komponente und ['drei']
und ['vier']
für den Link zu den jeweiligen Kindern von Komponente2
<router-outlet name="nameDrei"`
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'
}
]
},];
ändern Sie bitte Ihre router.module.ts als:
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'
}
]
},];
und in Ihrer 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'