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