2017-05-08 4 views
2

Ich habe ein Beispiel gesehen, wo ich zwei <router-outlet> habe, in denen nur eine eine name Eigenschaft hat - so machte ich einen kleinen Test:entfernen Aux Routen in Winkel 4“

ich dieses Router-Mapping habe:

export const routing = [ 
    {path:'', pathMatch:'full', component:EmptyComponent}, 
    {path:'dog', component:DogComponent}, 
    {path:'bird', outlet:'under', component:BirdComponent} 
]; 

Und ich habe auch diese routerLinks:

<li><a [routerLink]="['']">Clear</a></li> 
<li><a [routerLink]="['dog']">Only Dog</a></li> 
<li><a [routerLink]="['/', {outlets: {under: ['bird','' }}]">Only Bird</a></li> 
<li><a [routerLink]="['dog',{outlets: {under: ['bird','' }}]">Dog & Bird</a></li> 

<router-outlet></router-outlet> 
<hr> 
<router-outlet name='under'></router-outlet> 

Frage:

Wenn ich Clear klicken - ich keine sehen (✓)
Wenn ich Only Dog dann klicken - Ich sehe nur einen Hund (✓)
Wenn ich dann Only Bird klicken - ich sehe, Hund und Vogel (✕ - Warum das ? Ich möchte nur einen Vogel) sehen, ob ich Dog & Bird klicken - Ich sehe einen Fehler (✕ - werden keine Routen entsprechen URL Segment:.. ‚Hund‘ Ich erwarte Hund und einen Vogel zu sehen)

Warum ist das? Und wie kann ich meinen Code reparieren, so dass er die genaue Linkbeschreibung anzeigt?

PLNKR

Verwandte oder nicht - ich denke, es ist etwas mit Clearing einen AUX-Weg zu tun hat (vorbei null über routerLink nicht helfen - vgl. PLNKR2)

+4

Nachdem der Vogel den Hund gesehen hat, wird der Vogel davonfliegen. Sie sollten sich das ansehen – PierreDuc

+0

Ich erinnere mich an eine Frage wie diese zuvor mit einem Kopfgeld. War es wieder du? – echonax

+0

@echonax nein. Allerdings habe ich die allgemeine Idee von einem online-nicht-arbeiten PLNKR. –

Antwort

3

ich die Plunker fixiert. https://plnkr.co/edit/2fvbGnepD5tGaeYb8DKK?p=preview

Hier ist das Routing. Was ich verstanden habe, wenn ich Routing-Tests gelesen habe, wenn Sie gleichzeitig mit zwei Steckdosen navigieren müssen - benutzen Sie nur Steckdosen. Verwenden Sie für die Hauptleitung nur "primär".

<li><a [routerLink]="['']">None</a></li> 
    <li><a [routerLink]="[{outlets: {primary: 'dog', under: null}}]">Only Dog </a></li> 
    <li><a [routerLink]="[{outlets: {primary: null, under: ['bird']}}]">Only Bird</a></li> 
    <li><a [routerLink]="[{outlets: {primary: ['dog'], under: ['bird']}}]">Dog & Bird</a></li> 
+0

** Perfekt **. Vielen Dank. –

+0

[Ich habe ein verwandtes] (https://stackoverflow.com/questions/47857150/angular-how-can-i-activate-aux-route-with-lazy-loaded-module) Problem mit Auslass können Sie bitte eine haben aussehen ? –