Angular 8 считывает логическое значение из другого компонента в root компонент

Question

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

Я узнал о @Input и @Output и Eventemitter, однако, обычно это считывается из самого компонента. Принимая во внимание, что навигация не читает ни от каких компонентов, и все наши компоненты проходят через маршрутизатор (что я не совсем уверен, как это работает)

По существу app.component. html это:

<nav class="app-menu">
 <ul class="this-menu" *ngIf="!isAlt"></ul>
 <ul class="alternate-menu" *ngIf="isAlt"></ul>
</nav>
<div class="container">
  <router-outlet></router-outlet>
</div>

По умолчанию isAlt будет иметь значение false, пока вы не нажмете страницы, обернутые в указанный контейнер c, который изменит значение isAlt на true. Есть ли способ сделать это?

Answer 1

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

Вот рабочая демонстрация состояния службы: https://stackblitz.com/edit/angular-state-service?file=src%2Fapp%2Fstate.service.ts