Angular中从router-outlet页面向AppComponent传值时emit失效问题

你遇到的核心问题在于：通过router-outlet加载的组件并不是AppComponent的直接子组件，常规的@Output和@Input组件绑定只适用于模板中直接嵌套的父子组件关系，所以这种方式无法实现路由组件到AppComponent的通信。

下面是最常用的解决方案——使用共享服务结合RxJS来实现跨组件通信：

步骤1：创建共享消息服务 #

首先创建一个全局的共享服务，用来传递消息：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MessageService {
  // 创建一个Subject作为消息源
  private messageSource = new Subject<string>();
  // 暴露可观察对象供其他组件订阅
  message$ = this.messageSource.asObservable();

  // 发送消息的方法
  sendMessage(message: string) {
    this.messageSource.next(message);
  }
}

步骤2：在HomeComponent中使用服务发送消息 #

修改你的HomeComponent，注入共享服务并通过它发送消息：

import {Component, OnInit} from '@angular/core';
import { MessageService } from './message.service';

@Component({
 templateUrl:"home.component.html"
})
export class HomeComponent implements OnInit {
 // 注入消息服务
 constructor(private messageService: MessageService) {} 

 ngOnInit(){}

 sendMessage(msg){
  // 通过服务发送消息，替代原来的EventEmitter
  this.messageService.sendMessage(msg); 
 }
}

步骤3：在AppComponent中订阅消息 #

修改AppComponent，注入服务并订阅消息更新：

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

@Component({
 selector: 'my-app',
 templateUrl: './app.component.html',
 styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit, OnDestroy {
 name = 'Angular 6';
 msg:string = "default";
 // 保存订阅对象，用于组件销毁时清理
 private subscription: Subscription;

 constructor(private messageService: MessageService) {}

 ngOnInit() {
   // 订阅消息流，更新msg变量
   this.subscription = this.messageService.message$.subscribe(message => {
     this.msg = message;
   });
 }

 ngOnDestroy() {
   // 销毁订阅，避免内存泄漏
   this.subscription.unsubscribe();
 }
}

为什么原来的方法不生效？ #

当Angular通过router-outlet加载组件时，这个组件是由路由模块动态实例化的，它和AppComponent之间没有直接的模板嵌套关系——也就是说，HomeComponent并不是AppComponent在模板中直接声明的子组件，所以@Output发出的事件无法被AppComponent捕获到。而共享服务是Angular中处理非直接父子组件、跨模块组件通信的标准方案。

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