Отображение / скрытие элементов в соответствии с Angular вспомогательным выходом маршрутизатора - PullRequest
Новая
       18

Отображение / скрытие элементов в соответствии с Angular вспомогательным выходом маршрутизатора

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

Я использую Angular 9, и у меня есть 3 основных компонента:

  • Меню боковой панели
  • Основной выход маршрутизатора для отображения моих компонентов
  • Розетка вспомогательного маршрутизатора (screen) для визуализации других компонентов

Конфигурация моего маршрутизатора: 

const routes: Routes = [
    { path: 'foo', component: FooComponent },
    { path: 'bar', component: BarComponent },

    { path: 'map', component: MapComponent, outlet: 'screen' },
    { path: 'house', component: HouseComponent, outlet: 'screen' }
];

Я хочу отобразить указанные c опции в меню боковой панели, в соответствии с на загруженный маршрут в моей розетке вспомогательного маршрутизатора.
Например:

  • Если розетка вспомогательного маршрутизатора screen=map, отобразить Go to house в боковом меню
  • Если розетка вспомогательного маршрутизатора screen=house, отображение Go to map в меню боковой панели 
<div class="sidebar-menu">
     <a *ngIf="...screen=map..." (click)="goToHouse()">Go to house</a>
     <a *ngIf="...screen=house..." (click)="goToMap()">Go to map</a>
</div>

Знаете ли вы, можно ли использовать *ngIf в опциях меню боковой панели при динамическом значении выхода вспомогательного маршрутизатора?

Я ничего не нашел в документации Angular, поскольку это самая последняя функция (вспомогательные выходы).
Сначала я решил использовать this.router.url в атрибуте и сравнить с *ngIf, но URL может быть полностью отличается в зависимости от первичной розетки, с тем же значением screen.

/(foo//screen:map) или /(bar//screen:map) относятся, например, к одному и тому же screen=map, поэтому должны отображаться те же опции меню боковой панели.

...