Угловая 2. Основная компоновка для всех маршрутов

Question

Я хочу создать макет для своего приложения. Таким образом, я использую следующие маршруты:

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 {} 

Как вы можете видеть, я использую MainLayoutComponent для разметки. И, когда мое приложение начинается, я хочу перенаправить на путь contact.

Схема содержит навигации и router-outlet:

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

Это шаблон в ContactComponent:
<h2>Contact Component</h2>

Проблема, когда приложение запускается я вижу Contact Component сообщение, но я не вижу навигации. Но, если я открою localhost:3000/contact, тогда я вижу навигацию и сообщение Contact Component. Что мне не хватает?

Это Plunker. Вы можете проверить, я создал Go to Contact кнопку для перенаправления на /contact url.

Answer 1

Возможно, вы сделали это нарочно ... но вы, кажется, действительно переусердствовали. Вы можете легко добиться того, что вы пытаетесь сделать с гораздо более простой структурой и помещая навигацию в главном компоненте:

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

Во всяком случае - причина вашей plunker не делать то, что вы ожидаете, потому что в вашем контактном модуле вы определили некоторые маршрутизации, а также:

{ path: '', component: ContactComponent } 

Я удалил контакт маршрутизации от контактного элемента и теперь, кажется, работает:

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

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