Angular вторичный роутер-розетка ничего не отображает? - PullRequest
Новая
       15

Angular вторичный роутер-розетка ничего не отображает?

0 голосов
/ 11 апреля 2020

У меня был рабочий сайт, где только основной контент меняется с URL, остальные - "stati c". Я сделал это с router-outlet, а в app-routing.module.ts я только что указал пути. После этого я хотел создать боковую панель, которая выглядит одинаково на каждой странице, но, когда пользователь перемещается по ссылке, содержимое боковой панели (какие ссылки / элементы меню отображаются) должно измениться. Поэтому я подумал, что я должен поместить выход боковой панели (вторичный выход) в макет, и создавать компоненты только в том случае, если ссылки / пункты меню отличаются. Код: 

<div class="rows">
  <div id="row_header">
    <app-header></app-header>
  </div>
  <div id="side_nav">
    <div class="side_nav_container">
      <router-outlet name="sidebar"></router-outlet> 
    </div> 
  </div>
  <div id="row_middle">
    <app-main-content></app-main-content>
  </div>
  <div id="row_footer">
    <app-footer></app-footer>
  </div>
</div>

Это app.component.ts, это макет сайта. Вы можете видеть, что маршрутизатор-розетка по умолчанию не существует, только для боковой панели, потому что я поместил первичную розетку в средний раздел app-main-content. main-content.component. html: 

<!-- This is where all the content goes, even when the user navigates through menu links (NewsPage, Rules, Topics, Login) -->
<router-outlet></router-outlet>

Это мой app-routing-module.ts: 

const routes: Routes = [
  { path: '', redirectTo: '/topics', pathMatch: 'full'},
  { path: 'topics', component: TopicsPageComponent },
  { path: 'login', component: LoginPageComponent },
  {
    path: 'topics',
    component: SideNavTopicsComponent,
    outlet: 'sidebar'
  },

];

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

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

1 Ответ

1 голос
/ 11 апреля 2020

Вам необходимо указать все выходы, в которых вы хотите, чтобы навигация осуществлялась в вашей навигационной ссылке.

Например, согласно приведенному ниже коду, первичный выход будет направлен на компонент входа, а боковой выход будет направлен на компонент тем. 

<a [routerLink]="[{ outlets: { primary: ['login'],sidebar: ['topics'] } }]">Topics</a>
...