Angular: добавление боковой панели на большинство страниц (маршрутизатор) без использования корневого компонента?

Я знаю, что нормально, если ваш app-root (корневой компонент) имеет панель инструментов, боковую панель и т. д., добавленную туда, и <router-outlet> для изменения содержимого.

Моя проблема заключается в моем корневом компоненте (приложение-root), который вводится через index.html, например

<body>
  <app-root></app-root>
</body>

не может содержать боковую панель, меню и т. д., поскольку я хочу предложить экран входа в систему (и другие экраны), который не должен содержать эти частично общие компоненты. Итак, прямо сейчас мой корневой каталог приложения содержит простой <router-outlet>, который отлично подходит для моего входа в систему и других страниц, которые НЕ должны совместно использовать общий контент, например боковую панель, меню и т. д.

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

<md-sidenav-container class="example-container">
  <md-sidenav #sidenav class="example-sidenav">
    An example of content  in the side bar
  </md-sidenav>

  <div class="example-sidenav-content">

     <!-- All other routes should be injected here -->       

  </div>

</md-sidenav-container>

Что мне здесь делать?

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


angular router-outlet angular2-routing
person Martin    schedule 09.08.2017    source источник
comment
Почему бы вам просто *ngif не закрыть боковую панель до завершения входа в систему? Вот что у меня есть в приложении, над которым я работаю: <user-side-panel *ngIf="activeUser" [active-user]="activeUser"></user-side-panel> <content> <router-outlet></router-outlet> </content>   -  person Zze    schedule 09.08.2017

Ответы (1)


arrow_upward
1
arrow_downward

Я бы предложил:

  1. Поместите свой общий контент в корневой компонент приложения и используйте скрытый класс или ngif, чтобы скрыть его, в зависимости от активированного маршрута.
  2. Если у вас есть такое состояние, как (вошедший в систему пользователь), которое перенаправляет пользователя со страниц, не содержащих общего контента, на страницы, содержащие общий контент, вы можете разделить свое приложение на два модуля, установить все страницы с общим контентом в модуль и создать мини -app-root в этом модуле со всем общим содержимым и router-outlet.
  3. Создайте компонент, который содержит все общие материалы и маршрутизатор-выход, а в route.module используйте дочерние элементы load для перехода к любому компоненту.
person Nour    schedule 09.08.2017