Angular 8从另一个组件读取布尔值到根组件

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，直到您点击包装在特定容器中的页面，将 isAlt 的值更改为 true。有没有办法做到这一点？

Answer 1

您可以为您的项目创建状态服务。该服务可以检查您的变量。您可以放置​​一个可观察的状态服务变量。因此，每当您想要的页面被点击时，更新状态变量。这将在状态级别更新变量，状态服务将向所有订阅者发送该组件的值。

这是状态服务的工作演示： https://stackblitz.com/edit/angular-state-service?file=src%2Fapp%2Fstate.service.ts