Блог

Какой наилучший подход для отображения панели навигации в моем приложении Angular?

На данный момент я добавил свой nav-bar компонент поверх app.component.html и, подписавшись на службу, я устанавливаю, должны ли или не должны быть видны некоторые элементы в панели навигации..

Мой app.component.html выглядит так:

 <app-top-bar></app-top-bar> // navbar
<div class="container px-0 px-sm-3">
  <router-outlet></router-outlet>
</div>
  

Но на данный момент у меня возникли сомнения, не лучше ли включить app-top-bar в каждый компонент и просто передать ему в качестве входных данных, если элементы должны или не должны быть видны в нем..

Мой стандартный способ сделать это — в конфигурации маршрутизации.

Вы можете установить свой компонент макета в качестве родительского компонента компонентов pages.

Простой шаблон компонента макета может выглядеть следующим образом:

 <header>
  The header
</header>

<main>
  <!-- Your pages are rendered here -->
  <router-outlet></router-outlet>
</main>

<footer>
  The footer
</footer>
  

И объявление маршрутов круто выглядит так:

 const routes = [
  {
    component: LayoutComponent,
    path: '',
    children: [
      { component: PageComponent, path: 'page' }
    ]
  },
  { component: OtherPageComponent, path: 'otherpage' }
];
  

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

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

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

 <app-top-bar *ngIf="userIsLogged == true"></app-top-bar> 
<div class="container px-0 px-sm-3">
  <router-outlet></router-outlet>
</div>