Я создаю приложение Angular с двумя уровнями навигации в заголовке.
Навигация верхнего уровня видна на всех маршрутах в приложении, однако навигация второго уровня зависит от контекста и существует только на определенных маршрутах.
Например, при просмотре определенного курса в университетском веб-приложении навигация второго уровня может содержать ссылки на описание, предварительные условия, различные предметы и т. Д.
Одним из способов сделать это является создание компонента subnav, который имеет инструкцию switch и отображает правильный компонент subnav на основе маршрута:
<div [ngSwitch]="currentRoute">
<course-sub-nav *ngSwitchCase="course"></course-sub-nav>
<students-sub-nav *ngSwitchCase="students">...</students-sub-nav>
<support-sub-nav *ngSwitchCase="support">...</support-sub-nave>
</div>
Мне не нравится это решение, потому что теперь компонент sub-nav знает слишком много обо всех различных контекстно-зависимых sub-navs.
Другой подход - использовать сервис для управления им. то есть иметь SubNavService.setNavigationLinks(links: NavLink[]), который принимает массив ссылок. Затем компонент sub-nav может прослушивать изменения SubNavService и динамически отображать список подссылок.
Это решение немного чище, однако оно означает, что мне нужно вызывать эту службу для любого компонента верхнего уровня, чтобы обеспечить обновление под-навигации. Мне также нужно очистить ссылки на страницах, не требующих навигации.
Третьим решением может быть что-то вроде:
<!-- In header.component.html -->
<div class="sub-nav">
<ng-content="subnav"></ng-content>
</div>
<!-- IN course-page.component.html -->
<div>
<subnav>
<!-- my nav links -->
</subnav>
<div class="course-content">
<router-outlet></router-outlet>
</div>
</div>
Мне больше всего нравится этот подход, учитывая, что если существует субнав, субнав будет визуализироваться, а если нет, ничего не будет отображаться. Кроме того, соответствующий компонент имеет полный контроль над отображением ссылок в subnav. однако, учитывая, что course-page на самом деле не ребенок header, я не уверен, как я могу заставить его работать.
Мне было интересно, есть ли способ получить последний подход к работе. Если нет, будет ли второй подход наиболее прагматичным решением этой проблемы или существует более чистое решение?