Angular 4中Event Emitter失效求助，附组件实现代码

咱们先把你EventEmitter失效的问题解决掉：

1. 核心错误：组件选择器用错了 #

你的事件发送端是app-header组件（定义了@Output() emitClass），但接收端的模板里却写了<app-welcome (emitClass)="emitClass($event)"></app-welcome>——完全找错了监听对象！

修正方法：把接收端模板里的<app-welcome>换成<app-header>，这样才能监听到app-header发出的事件：

<!-- WelcomeComponent的HTML模板 -->
<app-header (emitClass)="emitClass($event)"></app-header>

2. 逻辑小问题（可选优化） #

你当前的toggleClass方法是先emit旧状态，再取反：

toggleClass() {
  this.emitClass.emit(this.menuShow);
  this.menuShow = !this.menuShow
}

这会导致第一次点击时，发送的是初始的false，之后才切换成true。如果想让事件同步最新的状态，应该先取反再emit：

toggleClass() {
  this.menuShow = !this.menuShow;
  this.emitClass.emit(this.menuShow);
}

除了父子组件常用的@Input()/@Output()，还有几种不同场景下的通信方案：

一、共享服务（适合跨层级/非父子组件） #

这是Angular中最常用的跨组件通信方式，用RxJS的BehaviorSubject来维护状态，组件通过订阅来获取更新：

1. 创建共享服务：

// menu.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class MenuService {
  // 初始状态为false，BehaviorSubject会保存当前最新值
  private menuState$ = new BehaviorSubject<boolean>(false);
  // 对外暴露可观察对象，防止外部直接修改状态
  public currentMenuState$ = this.menuState$.asObservable();

  // 提供切换菜单的方法
  toggleMenu() {
    const currentState = this.menuState$.value;
    this.menuState$.next(!currentState);
  }
}

2. 发送端（HeaderComponent）调用服务方法：

import { Component } from '@angular/core';
import { MenuService } from './menu.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html'
})
export class HeaderComponent {
  constructor(private menuService: MenuService) {}

  toggleClass() {
    this.menuService.toggleMenu();
  }
}

3. 接收端（WelcomeComponent）订阅状态：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { MenuService } from './menu.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html'
})
export class WelcomeComponent implements OnInit, OnDestroy {
  menuShow: boolean = false;
  private stateSubscription!: Subscription;

  constructor(private menuService: MenuService) {}

  ngOnInit() {
    // 订阅菜单状态变化
    this.stateSubscription = this.menuService.currentMenuState$.subscribe(state => {
      this.menuShow = state;
    });
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅，避免内存泄漏
    this.stateSubscription.unsubscribe();
  }
}

二、ViewChild/ViewChildren（父组件直接操作子组件） #

如果是父组件需要直接控制子组件的方法或属性，可以用ViewChild获取子组件实例：

父组件模板：

<!-- 给子组件加模板引用变量 -->
<app-header #headerComponent></app-header>
<button (click)="triggerMenuToggle()">父组件触发菜单切换</button>

父组件TS：

import { Component, ViewChild } from '@angular/core';
import { HeaderComponent } from './header.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  // 通过模板引用变量获取子组件实例
  @ViewChild('headerComponent') headerComp!: HeaderComponent;

  triggerMenuToggle() {
    // 直接调用子组件的方法
    this.headerComp.toggleClass();
  }
}

三、Input属性绑定（父传子单向通信） #

如果是父组件向子组件传递数据，用@Input()装饰器实现单向绑定：

子组件TS：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html'
})
export class HeaderComponent {
  // 接收父组件传递的菜单状态
  @Input() menuShow: boolean = false;
}

父组件模板：

<app-header [menuShow]="parentMenuState"></app-header>
<button (click)="parentMenuState = !parentMenuState">切换菜单状态</button>

父组件TS：

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  parentMenuState: boolean = false;
}

内容的提问来源于stack exchange，提问作者kulls