Eckig 2. Hauptlayout für alle Routen

Question

Ich möchte Layout für meine App erstellen. So verwende ich die folgenden Routen:

export const routes: Routes = [ 
{ 
    path: '', 
    component: MainLayoutComponent, 
    children: [ 
     { 
     path: '', 
     redirectTo: 'contact', 
     pathMatch: 'full' 
     }, 
     { 
     path: 'contact', 
     loadChildren : 'app/contact/contact.module#ContactModule' 
     } 
    ] 
    } 

]; 

@NgModule({ 
    imports: [RouterModule.forRoot(routes)], 
    exports: [RouterModule] 
}) 
export class AppRoutingModule {} 

Wie man sehen kann ich MainLayoutComponent für das Layout. Und wenn meine Anwendung startet, möchte ich auf contact Pfad umleiten.

Das Layout enthält Navigation und router-outlet:

@Component({ 
    template: ` 
    <nav>Navigation content</nav> 
    <div class="container"><router-outlet></router-outlet></div> 
    `, 
}) 

Dies ist Vorlage in ContactComponent:
<h2>Contact Component</h2>

Das Problem ist, wenn app ausgeführt wird, ich Contact Component Nachricht sehen, aber ich sehe nicht, Navigation. Aber, wenn ich localhost:3000/contact öffne, sehe ich Navigation und Contact Component Nachricht. Was vermisse ich?

Dies ist Plunker. Sie können überprüfen, ich create Go to Contact Schaltfläche, um an /contact URL umleiten.

Answer 1

Vielleicht hast du es mit Absicht gemacht ... aber du scheinst Dinge wirklich zu kompliziert zu machen. Sie können ganz einfach erreichen, was Sie versuchen, mit einer viel einfacheren Struktur zu tun und durch die Navigation in der Hauptkomponente setzen:

https://plnkr.co/edit/pCQvJ3PwO0nMPxRvWR1o?p=preview

Wie dem auch sei - der Grund, warum Ihr Plunker tut nicht, was Sie erwarten ist, weil in Ihrem Kontaktmodul haben Sie einige Routing als auch definiert:

{ path: '', component: ContactComponent } 

entfernte ich den Kontakt aus der Kontaktkomponente Routing und jetzt scheint es zu funktionieren:

@NgModule({ 
    imports:  [ ], 
    declarations: [ ContactComponent ], 
    providers: [ ] 
}) 
export class ContactModule { } 

https://plnkr.co/edit/Rwl5Hw83LfkLmG4wF3oK?p=preview