2016-09-27 2 views
4

Ich möchte zwei Router-Ausgänge haben, die primäre, und eine modale Steckdose. Wenn ich zu /login navigiere, möchte ich meine Home-Komponente im primären Outlet und meine Login-Komponente im Modal-Outlet zeigen. Etwas wie folgt aus:Angular 2 - Named Router Outlets ohne schreckliche URLs

{ 
    path: 'login', 
    component: HomeComponent 
}, 
{ 
    path: 'login', 
    component: LoginComponent, 
    outlet: 'modal' 
} 

Dies ist möglich durch die Verwendung schreckliche Hilfs URLs wie /home(modal:login) zu tun, aber natürlich will niemand ihre URLs so aussehen.

Wie löse ich das ohne diese URLs?

+0

Seltsame Schätzung von Ihrem Outlet-Namen sagt mir, dass Sie die zweite Router-Outlet für die Darstellung von Modal verwenden, wie wäre es mit diesem Ansatz stattdessen: http://blog.brecht.io/Modals-in-angular2/? –

+1

Dies könnte ein schlechtes Beispiel gewesen sein, aber ich möchte sagen können: "Öffnen Sie für diesen Pfad Komponente a in Ausgang a und Komponente b in Ausgang b" – adamfinstorp

+0

Wenn Sie den Angular Router mit mehreren verwenden möchten Router-Outlet, du musst dich mit diesen URLs abfinden. Es gibt keinen Weg, weil der Router und die URL grundsätzlich verheiratet sind. –

Antwort

2

Warum Sie für die Komponente gehen nicht weniger Strecken,

{ 
    path: 'login', 
    children: [ 
     { 
      path: '', 
      component: HomeComponent 
     }, 
     { 
      path: '', 
      component: LoginComponent, 
      outlet: 'modal' 
     } 
    ] 
} 

Dies wird sicherstellen, dass, wenn Sie Ihre Route/login ist, HomeComponent in primären Ausgang gehen und LoginComponent mit Namen Router-Ausgang gehen 'modal'.