Angular 17中如何用Event Emitter传递数据？路由场景实现

当父组件通过<router-outlet>加载子组件时，常规的@Output+EventEmitter绑定方式无法直接生效，因为没有显式的子组件选择器可以绑定事件。这里提供两种实用的实现方案：

方案一：通过RouterOutlet的activate事件订阅子组件的EventEmitter #

这种方法适合直接的父子路由场景，能直接关联子组件实例并订阅其输出事件。

1. 子组件定义输出事件 #

在子组件中正常声明@Output和EventEmitter：

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html'
})
export class ChildComponent {
  @Output() dataChanged = new EventEmitter<string>();

  // 触发传递数据的方法
  triggerDataTransfer() {
    this.dataChanged.emit('来自子组件的消息');
  }
}

2. 父组件绑定router-outlet的activate事件 #

在父组件模板中，给<router-outlet>绑定activate事件，该事件会在子组件激活时触发，参数就是子组件的实例：

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

3. 父组件订阅子组件的输出事件 #

在父组件的TS代码中，获取子组件实例并订阅其输出事件，记得在组件销毁时取消订阅避免内存泄漏：

import { Component, OnDestroy } from '@angular/core';
import { ChildComponent } from './child/child.component';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent implements OnDestroy {
  private childDataSubscription: Subscription | null = null;

  onChildComponentActivated(component: any) {
    // 校验是否为目标子组件
    if (component instanceof ChildComponent) {
      this.childDataSubscription = component.dataChanged.subscribe(data => {
        console.log('父组件接收到数据：', data);
        // 这里写你的数据处理逻辑
      });
    }
  }

  ngOnDestroy() {
    this.childDataSubscription?.unsubscribe();
  }
}

方案二：使用共享服务实现跨组件通信 #

这种方法更灵活，适合复杂路由场景或多个组件间的通信，不受路由层级限制。

1. 创建共享数据服务 #

创建一个全局注入的服务，利用RxJS的Subject来传递数据：

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

@Injectable({ providedIn: 'root' })
export class DataTransferService {
  private dataSubject = new Subject<string>();
  // 对外暴露可观察对象，避免外部直接调用next方法
  public data$: Observable<string> = this.dataSubject.asObservable();

  sendData(data: string) {
    this.dataSubject.next(data);
  }
}

2. 子组件中调用服务发送数据 #

在子组件中注入服务，通过sendData方法传递数据：

import { Component } from '@angular/core';
import { DataTransferService } from '../data-transfer.service';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html'
})
export class ChildComponent {
  constructor(private dataService: DataTransferService) {}

  sendDataToParent() {
    this.dataService.sendData('来自子组件的消息');
  }
}

3. 父组件中订阅服务的数据 #

在父组件中注入服务，订阅data$来接收数据，同样要在销毁时取消订阅：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { DataTransferService } from '../data-transfer.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent implements OnInit, OnDestroy {
  private dataSubscription: Subscription | null = null;

  constructor(private dataService: DataTransferService) {}

  ngOnInit() {
    this.dataSubscription = this.dataService.data$.subscribe(data => {
      console.log('父组件接收到数据：', data);
      // 这里写你的数据处理逻辑
    });
  }

  ngOnDestroy() {
    this.dataSubscription?.unsubscribe();
  }
}

方案选择建议 #

• 如果是直接父子路由关系，优先用方案一，逻辑更直接，不需要额外服务。
• 如果是复杂路由场景（比如多级路由、兄弟组件通信），或者需要在多个组件间共享数据，方案二更合适。

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