2016-08-25 4 views
6

Die Dokumentation ist nicht sehr gut, aber ich versuche, verschiedene Router-Ausgänge auf der gleichen Seite/Route zu haben.Angular 2 Router - Benannte Steckdosen

Ich habe dies in meinem app.component.html

<router-outlet></router-outlet> 
<router-outlet name="dashboard"></router-outlet> 

Mein app.routes.ts

{ 
    path: '', 
    component: HomeComponent, 
    outlet: 'primary' 
}, 
{ 
    path: '', 
    component: DashboardComponent, 
    outlet: 'dashboard' 
}, 
{ 
    path: '**', 
    redirectTo: '404' 
} 

So auf meiner Startseite (zB "example.com", nicht „Beispiel. com; dashboard: dashboard ") Ich möchte die Home-Komponente im primären Router-Outlet und meine Dashboard-Komponente im Dashboard-Outlet anzeigen. Das hat mit ngrs/router funktioniert, aber da es veraltet ist, versuche ich zu migrieren. Ist es möglich, ohne das Dashboard: Dashboard in eckigen/Router?

Mit dieser Konfiguration I 404. umgeleitet bin beeing habe ich das auch ohne Glück versucht:

{ 
    path: '', 
    component: HomeComponent, 
    children: [ 
     { 
      path: '', 
      component: DashboardComponent, 
      outlet: 'dashboard' 
     } 
    ] 
}, 

Hat jemand arbeiten namens Router Stellen verwaltet werden?

UPDATE In Bezug auf die Hinweise zur Migration von NGRX/Router Winkel/Router sollten Sie in der Lage sein, dies zu haben:

{ 
    path: 'blog', 
    component: HomeComponent, 
    outlet: 'main' 
}, 
{ 
    path: 'blog', 
    component: RegisterComponent, 
    outlet: 'dashboard' 
} 

Aber wenn ich example.com/blog gehen, bekomme ich diese Fehler in der Konsole:

Error: Cannot match any routes: 'blog'

https://github.com/ngrx/router/blob/master/docs/overview/migration.md

+0

Sorry, aber das Plunker enthält zu viel Code. –

+0

Ja, tut mir leid, aber weißt du, ob es überhaupt möglich ist? ohne viele Dinge in der URL zu haben. Wenn ich 4 Router-Steckdosen auf der Startseite habe, möchte ich nicht, dass die URL so aussieht: beispiel.com (dashboard: dashcmp) (menü: troll) (footer: extralongfooter) etc .. – Kungen

+0

Ich bin ziemlich sicher, dass es keine gibt herum und zeigt diese Teile in der URL. –

Antwort

3

diese Konfiguration Versuchen:

{ 
    path: 'wrap', 
    component: HomeComponent, 
    children: [ 
     { 
      path: 'dash', 
      component: DashboardComponent, 
      outlet: 'dashboard' 
     } 
    ] 
} 

mit:

this.router.navigateByUrl('/wrap(dashboard:dash)'); 

Ich weiß nicht, warum ein URL-Fragment muss (wie die "wrap" Ich habe), aber es funktioniert ...

und die anderen:

{ 
    path: 'blog', 
    component: HomeComponent, 
    outlet: 'main' 
}, 
{ 
    path: 'blog', 
    component: RegisterComponent, 
    outlet: 'dashboard' 
} 

mit:

this.router.navigateByUrl('/(main:blog)'); 
this.router.navigateByUrl('/(dashboard:blog)'); 
+0

es nicht für mich Ork. wäre es möglich, einen Plünderer –

+2

[Versuchen Sie diese Plnkr] (http://embed.plnkr.co/c9IgBZ/) –

+0

Vielen Dank für den Plunker. es funktioniert jetzt für mich. Ich möchte das gleiche in dieser Methode tun.router.navigate(). kann ich das Gleiche tun? –

0

Dies ist, was ich am Ende mit, um es an die Arbeit:

 this.router.navigate([{ outlets: { detail: ['summary'] } }], 
          { skipLocationChange: true, relativeTo: this.route }); 

Hinweis: Ich habe keinen '' für meine Eltern Weg haben. Es scheint eine Reihe von GitHub-Problemen zu geben, die sich auf '' als übergeordneten Pfad beziehen, aber nicht sicher, ob sie zutreffen.