angular 4+ routerlink загружает компонент в разных маршрутизаторах-розетках

Я только начал изучать маршрутизацию в Angular и пытаюсь сделать простое приложение, которое отображает домашнюю страницу со ссылками на панель мониторинга и страницы контактов.

Приложение.деталь.ts 

import {Component} from '@angular/core'

@Component({
  selector: 'my-app',
  template: `
    <router-outlet></router-outlet>
  `,
})
export class AppComponent {
  constructor() { }
}

Приложение.модуль.ts 

import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {RouterModule} from '@angular/router'

import { AppComponent } from './app.component'
import {Home} from './home.component'
import {Dashboard} from './dashboard.component'
import {Contact} from './contact.component'

@NgModule({
  imports: [ BrowserModule,
  RouterModule.forRoot([
    {path: 'home', component: Home},
    {path: 'dashboard', component: Dashboard},
    {path: 'contact', component: Contact},
    {path: '', redirectTo: '/home', pathMatch: 'full'}
    ])],
  declarations: [ AppComponent, Home, Dashboard, Contact ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Домой.деталь.ts 

import {Component} from '@angular/core'

@Component({
  template: `
    <h2>Home</h2>
    <nav>
      <a routerLink="/dashboard">Dashboard</a>
      <a routerLink="/contact">Contact</a>
    </nav>
    <router-outlet></router-outlet>
  `,
})
export class Home {
  constructor() { }
}

Панель мониторинга и страницы контактов должны отображаться под навигационной панелью, где определен маршрутизатор-розетка компонента Home. Но вместо этого, я думаю, что они загружаются в розетку маршрутизатора, определенную в апп.деталь.формат html. Почему содержимое компонента Dashboard / Contact не загружается ниже навигационной панели?

Я попытался поискать другие вопросы, но не смог найти ответов, имеющих отношение к этой проблеме.

Плунжер- https://plnkr.co/edit/sjjJgHl5YHKsPVTGGDWs

1 2
angular-router

1 ответ:

Я думаю, что то, что вы действительно хотите сделать, это что-то вроде ниже.

Для приложения.компонент: 

import {Component} from '@angular/core'

@Component({
selector: 'my-app',
template: `
    <nav>
    <a routerLink="/home">Home</a>
    <a routerLink="/dashboard">Dashboard</a>
    <a routerLink="/contact">Contact</a>
    </nav>
    <router-outlet></router-outlet>
`,
})
export class AppComponent {
constructor() { }
}

И для дома.компонент: 

import {Component} from '@angular/core'

@Component({
template: `
    <h2>Home</h2>
`,
})
export class Home {
constructor() { }
}

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

1