Angular中如何通过router-outlet监听子组件发射的事件

问题原因 #

<router-outlet>是Angular内置的路由占位指令，本身并非你通过路由加载的业务子组件。路由匹配到的组件会渲染在router-outlet的同级位置，而非作为它的子节点存在，因此直接在router-outlet标签上绑定子组件自定义的@Output事件，无法接收到子组件的发射值。

方案1：通过activate事件获取子组件实例（简单场景首选） #

router-outlet原生提供activate事件，会在路由组件加载完成时触发，回调参数即为当前加载的组件实例，拿到实例后直接订阅它的事件发射器即可。

• 修改父组件模板，绑定activate事件：

  <router-outlet (activate)="onActivate($event)"></router-outlet>
  

• 父组件类中编写实例获取、订阅逻辑，注意组件销毁时取消订阅避免内存泄漏：

  import { Component, OnDestroy } from '@angular/core';
  import { Subscription } from 'rxjs';
  // 引入你要监听的子组件类
  import { FilhoComponent } from './filho/filho.component';
  
  @Component({
    selector: 'app-pai',
    templateUrl: './pai.component.html'
  })
  export class PaiComponent implements OnDestroy {
    private filhoEventSub?: Subscription;
  
    // 原有的父组件业务方法
    avancar() {
      console.log('收到子组件通知，执行下一步');
    }
  
    onActivate(componentInstance: any) {
      // 校验当前加载的是目标子组件，避免其他路由组件报错
      if (componentInstance instanceof FilhoComponent) {
        // 先清空之前的订阅防止重复绑定
        this.filhoEventSub?.unsubscribe();
        // 订阅子组件的Output事件
        this.filhoEventSub = componentInstance.finalizarManifestacao.subscribe(() => {
          this.avancar();
        });
      }
    }
  
    ngOnDestroy(): void {
      // 销毁时取消订阅
      this.filhoEventSub?.unsubscribe();
    }
  }
  

子组件原有@Output定义、emit()逻辑不需要做任何修改即可正常工作。如果不想引入具体子组件类，也可以用属性判断做校验：if ('finalizarManifestacao' in componentInstance)。

方案2：共享服务通信（多层级/多组件场景适用） #

如果组件嵌套层级深、或者多个组件都需要触发该事件，可以通过全局共享服务实现事件通信，不需要依赖组件层级关系。

• 新建共享服务：

  import { Injectable } from '@angular/core';
  import { Subject } from 'rxjs';
  
  @Injectable({ providedIn: 'root' })
  export class EventoCompartilhadoService {
    private finalizarSource = new Subject<void>();
    // 对外暴露只读流
    public finalizar$ = this.finalizarSource.asObservable();
  
    triggerFinalizar() {
      this.finalizarSource.next();
    }
  }
  

• 子组件注入服务，触发事件时调用服务方法：

  import { Component } from '@angular/core';
  import { EventEmitter, Output } from '@angular/core';
  import { EventoCompartilhadoService } from '../evento-compartilhado.service';
  
  @Component({
    selector: 'app-filho',
    templateUrl: './filho.component.html'
  })
  export class FilhoComponent {
    @Output() finalizarManifestacao = new EventEmitter<any>();
  
    constructor(private eventoService: EventoCompartilhadoService) {}
  
    finalizar(manifestacaoIdentificada: boolean) {
      this.finalizarManifestacao.emit();
      this.eventoService.triggerFinalizar();
    }
  }
  

• 父组件注入服务，初始化时订阅事件即可：

  import { Component, OnDestroy, OnInit } from '@angular/core';
  import { Subscription } from 'rxjs';
  import { EventoCompartilhadoService } from '../evento-compartilhado.service';
  
  @Component({
    selector: 'app-pai',
    templateUrl: './pai.component.html'
  })
  export class PaiComponent implements OnInit, OnDestroy {
    private eventoSub?: Subscription;
  
    constructor(private eventoService: EventoCompartilhadoService) {}
  
    ngOnInit(): void {
      this.eventoSub = this.eventoService.finalizar$.subscribe(() => {
        this.avancar();
      });
    }
  
    avancar() {
      // 原有业务逻辑
    }
  
    ngOnDestroy(): void {
      this.eventoSub?.unsubscribe();
    }
  }
  

注意：共享服务是单例的，订阅后一定要在组件销毁时取消订阅，否则会造成内存泄漏、重复触发的问题。

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