Angular 8 從另一個組件讀取 boolean 值到根組件

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

您可以為您的項目創建 state 服務。 該服務可以檢查您的變量。 您可以放置 state 服務變量的 observable。 因此，每當您想要的頁面被點擊時，更新 state 變量。 這將更新 state 級別的變量，並且 state 服務將向所有訂閱者發出該組件的值。

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