Question

我有一个父组件HeaderComponent，有两个子组件NavComponent和BurgerComponent！在momemnt上，有一个类可以在单击汉堡时切换汉堡的活动无效状态！在汉堡处于非活动状态时，在第一个图像下方，第二个图像显示处于活动状态的汉堡和NavComponent。

在NavComponent区域上单击时，我已设法关闭NavComponent。

问题：单击导航区域以关闭NavComponent，但我还需要将汉堡包设为非活动状态（图像1）。

到目前为止我所拥有的：

具有点击事件的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);
  }
}

BurgerComponent 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>

collapseMenu（）发送一个布尔值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);
  }

现在我被困在Burger和Nav这两个组件之间的通信应该如何工作！

Answer 1

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

您可以尝试使用ngrx之类的框架，也可以按照下面提供的示例创建自己的服务。

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

application-state.service

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

burger.component

<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() {
  }

}

查看this example on StackBlitz来查看它的运行情况

切换不同组件的活动/非活动类别角度

1 个答案: