Javascript 从不同组件切换活动/非活动类

我有一个父组件HeaderComponent，它有两个子组件NavComponent和BurgerComponent！此时，有一个类可以在单击汉堡时切换汉堡的活动-非活动状态！当汉堡处于非活动状态时，在第一个图像下方，第二个图像显示活动汉堡和导航组件

单击NavComponent区域时，我已管理NavComponent关闭

问题：点击导航区域关闭导航组件，但我还需要汉堡进入非活动状态（图1）

到目前为止，我所拥有的：

带有单击事件的NavComponent HTML

---

您需要一个单独的服务来管理共享变量

您可以尝试一个类似的框架，或者按照下面提供的示例创建自己的服务

请注意application-state.service如何成为多个组件之间共享的数据的所有者。这样，位于布局中不同部分的组件就可以共享数据，而不必相互了解

应用程序状态服务

汉堡成分

导航组件

---

签出查看它的运行情况

只需将您的状态存储在服务中，然后将服务注入所有组件中即可。这就是服务的用途……或者直接作用于

ApplicationStateService.active

。如果在每个组件中都注入服务，那么

ApplicationStateService.active

将在任何地方都可用。这在理论上很有意义，但我太初学了，无法找到实用的解决方案！你介意详细说明一下你的答案吗？谢谢我已经更新了我的答案，并提供了一个示例—诀窍是将共享变量放入服务中。我希望这将帮助您完成解决方案。

export class ApplicationStateService implements OnInit {
  public isNavCollapsed: boolean = false;
}

<button class="burger" [class.active]="!state.isNavCollapsed" (click)="onBurgerClicked()">

</button>

import { Component, OnInit } from '@angular/core';
import { ApplicationStateService } from '../application-state.service';

@Component({
  selector: 'app-burger',
  templateUrl: './burger.component.html',
  styleUrls: ['./burger.component.css']
})
export class BurgerComponent implements OnInit {

  constructor(public state: ApplicationStateService) { }

  ngOnInit() {
  }

  onBurgerClicked() {
    this.state.isNavCollapsed = !this.state.isNavCollapsed;
  }

}

<ul *ngIf="!state.isNavCollapsed">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>
    <button (click)="state.isNavCollapsed = true">close</button>
  </li>
</ul>

import { Component, OnInit } from '@angular/core';
import { ApplicationStateService } from '../application-state.service';

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css']
})
export class NavComponent implements OnInit {

  constructor(public state: ApplicationStateService) { }

  ngOnInit() {
  }

}