我有一个父组件HeaderComponent，它有两个子组件，NavComponent和BurgerComponent！目前，有一个类，当点击它时，它可以切换汉堡的活动/非活动状态！下面是BurgerComponent处于非活动状态时的第一张图片，第二张图片中有一个活动的BurgerComponent和NavComponent可见。

问题

NavComponent通过点击导航区域关闭，但我还需要BurgerComponent进入非活动状态（图1）。
100d 1xx 1c 1d 1x的字符串
到目前为止，我有：
带有click事件的NavCompoent HTML

<nav class="nav-menu {{ menuStatus }}" (click)="collapseMenu($event)">

字符串
NavComponent TS：

export class NavComponent implements OnInit {

    title: string;
    closeMenu: boolean;
    @Output() sendTitle = new EventEmitter < string > ();
    @Output() menuClose = new EventEmitter<any>();
    @Input() menuStatus: boolean;

    active = false;
    constructor() {}

    ngOnInit() {}

    getText(event) {
        this.title = event.target.innerText;
        this.sendTitle.emit(this.title)
        console.log("title sent", this.title);
    }

    collapseMenu($event) {
        this.menuStatus = false;
        this.menuClose.emit(this.menuStatus);
    }
}

型
HeaderComponent HTML（这是父组件）

<header class="sticky">
    <div class="header-container">
        <div class="header-left">
            <h1>{{pageTitle}}</h1>
        </div>
        <div class="header-right">
            <app-burger (opened)="burgerStatus($event)" [menuCloseBurger]="menuClose"></app-burger>
        </div>
    </div>
</header>
<app-nav (sendTitle)="getTitle($event)" [menuStatus]="burger" (menuClose)="sendingMenuClose($event)"></app-nav>

型
顶盖组件TS：

export class HeaderComponentComponent implements OnInit {

  route: string;
  pageTitle: string;
  burger: string;
  menuClose: string;

  constructor(location: Location, router: Router) {
    router.events.subscribe(val => {
        this.pageTitle = location.path();
        this.pageTitle = this.pageTitle.substring(1);
    });
   }

  ngOnInit() {
    this.pageTitle = this.route;
    console.log(this.pageTitle);
  }

  getTitle($event) {
    console.log(this.route);
    this.pageTitle = $event;
  }

  burgerStatus($event) {
    this.burger = $event;
    console.log($event);
  }

  sendingMenuClose($event) {
    this.menuClose = $event;
    console.log("menu close at parent", this.menuClose);
  }
}

型
汉堡成分TS：

export class BurgerComponent implements OnInit {
  active: boolean;
  @Output() opened = new EventEmitter<any>();
  @Input() menuCloseBurger: string;

  constructor() { }

  ngOnInit() {
    this.active = false;
  } 

  onBurgerClicked() {
    this.active = !this.active;
    this.opened.emit(this.active);
  }
}

型
BurgerComponent HTML：

<div class="burger-menu" [class.active]="active" (click)="onBurgerClicked()">
  <div class="burger-container">
    <div class="burger-inner"></div>
  </div>
</div>

型
BullseMenu（）发送一个布尔值false，我需要把它放到BurgerCompnent类中，这样它的值就为false，汉堡包就关闭了。我太接近了，我不知道最后一步！
根据@PitchBlackCat的建议，我已经创建了一个服务NavStatusService！

import { Injectable } from '@angular/core';
import { EventEmitter } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class NavStatusService {

  constructor() { }

   public readonly isNavCollapsed$ = new EventEmitter<boolean>();
}

型
我在BurgerComponent中实现了它：

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

型
现在我被困在如何在两个组件之间的通信，汉堡和导航应该工作！