Угловая выдвижная боковая панель 2+ вне розетки маршрутизатора

Я пытаюсь реализовать боковую панель, которая открывается при нажатии различных кнопок в приложении (функция типа «дополнительная информация»). По этой причине я хочу разместить компонент боковой панели вне розетки маршрутизатора.

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

<nav>
<router-outlet>
<sidebar>

Когда боковая панель открыта, я хотел бы затемнить остальную часть экрана и щелкнуть в любом месте (кроме боковой панели, закройте боковую панель). Я думал сделать это так: обернуть nav и router-outlet в div с событием click, чтобы закрыть боковую панель. Открытие / закрытие / переключение боковой панели управляется с помощью службы. Проблема, с которой я сталкиваюсь, заключается в том, что обертывание роутера (и навигации) таким образом переопределяет фактические нажатия кнопок внутри маршрутов, предназначенных для открытия боковой панели. Любой совет? Большое спасибо


person user1380431    schedule 23.06.2018    source источник
comment
Предоставьте пример кода, который у вас есть в настоящее время, и, если возможно, создайте демонстрацию с помощью stackblitz.com/fork/angular Тогда я смогу вам помочь.   -  person J J B    schedule 24.06.2018


Ответы (1)


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

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

Еще одна вещь, которую вы можете сделать, - это когда у вас есть контроль над слайдером, вы можете заставить его выдвигать модальный div. Хотя у меня нет кода для этого.

person Dan Chase    schedule 23.06.2018
comment
Я использую это: w3schools.com/howto/howto_js_sidenav.asp. Вам просто нужно преобразовать javascript в angular, и это довольно просто. Просто используйте Event Emitter, чтобы управлять заголовком файла main. Дайте знать, если у вас появятся вопросы. - person harold_mean2; 24.06.2018