Angular 6 Router с повторением HTML

Question

Я пытаюсь добиться следующего:

1. У меня есть mat-toolbar компонент в app.component.html, который отображает главную верхнюю панель навигации сайта. Под панелью инструментов находится <router-outlet></router-outlet>.
2. Когда пользователь переходит к корню в localhost:4200/, я хочу, чтобы верхняя панель навигации была видимой, а все компоненты, связанные со ссылками в панели навигации, отображались под верхней панелью навигации.
3. Проблема теперь в том, что верхняя панель навигации повторяется дважды, когда пользователь переходит к корню. При нажатии на ссылки повторяющаяся панель навигации удаляется, а соответствующий компонент отображается под панелью навигации (что я и хочу без повторения).

Вот это app.module.ts

// initialization and module imports
const RootRoutes: Routes = [
 {path: "", redirectTo: "root", pathMatch: "full"},
 {path: "root", component: AppComponent, },
 //{path: "home", component: HomeComponent },
 {path: "fiction", component: FictionDisplayComponent },
 {path: "nonfiction", component: NonFictionDisplayComponent},
 {path: 'poetry', component: PoetryDisplayComponent},
 {path: 'journal', component: JournalDisplayComponent},
 {path: 'letters', component: PersonalLetterDisplayComponent},
 {path: 'jokes', component: JokesDisplayComponent}
];
// NgModule declaration

Вот как app.component.html настроен:

<div class="pure-g rr-main-wrapper">
    <div class="pure-u-5-5 home-top-navbar-wrapper">
        <rr-home-top-navbar></rr-home-top-navbar>
    </div>

</div> 
<router-outlet></router-outlet>

Вот как home-top-navbar.component.html настроен:

<mat-toolbar color="primary" class="home-top-nav">
  <mat-toolbar-row>
    <img src="./../../assets/imgs/logo2.png" width="200" height="50">
    <mat-nav-list class="home-top-nav">
      <mat-list-item *ngFor="let route of navbarRoutes">
        <a [routerLink]="[route.url]" class="navbar-link">{{ route.name }}</a>
      </mat-list-item>
    </mat-nav-list>
  </mat-toolbar-row>

Теперь, если вы заметили, что есть закомментированный путь, {path: 'home', component: HomeComponent} где, я попытался загрузить панель инструментов отдельно и у меня было только <router-outlet></router-outlet> в app.component.html. Однако проблема заключается в том, что при нажатии на ссылку страница переходит к исправленному компоненту,
верхняя панель навигации больше не видна (что ожидается, поскольку другие компоненты не повторяют код панели навигации).

Есть ли способ достичь этого, не повторяя панель инструментов дважды, когда пользователь переходит к корню? Можно ли это сделать без копирования / вставки панели навигации на каждой странице для компонентов верхнего уровня?

Answer 1

AppComponent должен не быть частью вашего Routes.Это потому, что AppComponent является точкой входа в ваше приложение.В index.html у вас есть что-то вроде <rr-app></rr-app>.Если есть маршрут, который ведет к AppComponent (маршрут root), Angular будет отображать AppComponent в пределах router-content, который заканчивается двумя navbar и ничем иным.

Из моего понимания, вам не нужен маршрут root.

Измените конфигурацию маршрутизации на следующую.

/* 
 * Removed AppComponent and redirected "/" to "home"
 */
const RootRoutes: Routes = [
 {path: "", redirectTo: "home", pathMatch: "full"},
 {path: "home", component: HomeComponent },
 {path: "fiction", component: FictionDisplayComponent },
 {path: "nonfiction", component: NonFictionDisplayComponent},
 {path: 'poetry', component: PoetryDisplayComponent},
 {path: 'journal', component: JournalDisplayComponent},
 {path: 'letters', component: PersonalLetterDisplayComponent},
 {path: 'jokes', component: JokesDisplayComponent}
];