Angular 5中UI Router的子组件向父组件回调/监听实现方案

Great question! This is exactly the kind of component design that makes Angular apps scalable and reusable—keeping your list component focused on rendering items and emitting events, while letting parent components handle the business logic. Let's break down the best approaches based on how your components are structured:

1. 模板嵌套的父子组件：使用@Output() + EventEmitter（官方推荐） #

这是Angular组件间事件传递的标准方式，完美契合你提到的职责分离原则。子组件只负责触发选中事件，父组件决定如何响应。

步骤1：在列表子组件中定义输出事件 #

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

@Component({
  selector: 'app-item-list',
  template: `
    <ul class="item-list">
      <li *ngFor="let item of items" 
          (click)="onItemClicked(item)"
          class="item-list__item">
        {{ item.label }}
      </li>
    </ul>
  `
})
export class ItemListComponent {
  // 示例列表数据（也可以通过@Input()从父组件传入）
  items = [
    { id: 1, label: '第一行数据' },
    { id: 2, label: '第二行数据' },
    { id: 3, label: '第三行数据' }
  ];

  // 定义输出事件，父组件可以绑定这个事件
  @Output() itemSelected = new EventEmitter<any>();

  private onItemClicked(item: any): void {
    // 触发事件，把选中的item传递给父组件
    this.itemSelected.emit(item);
  }
}

步骤2：在父组件中绑定事件并处理逻辑 #

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

@Component({
  selector: 'app-parent',
  template: `
    <h2>父组件</h2>
    <!-- 绑定子组件的itemSelected事件到父组件的处理方法 -->
    <app-item-list (itemSelected)="handleItemSelection($event)"></app-item-list>
    
    <!-- 展示选中结果 -->
    <div *ngIf="selectedItem" class="selected-item">
      你选中了：{{ selectedItem.label }}（ID: {{ selectedItem.id }}）
    </div>
  `
})
export class ParentComponent {
  selectedItem: any;

  handleItemSelection(selectedItem: any): void {
    // 这里写父组件的具体业务逻辑，比如请求详情、更新状态等
    this.selectedItem = selectedItem;
    console.log('选中项详情:', selectedItem);
  }
}

为什么这个方案好？

• 完全符合职责分离：子组件只关心"什么时候触发选中事件"，不关心"触发后做什么"
• 复用性极强：同一个ItemListComponent可以在任何父组件中使用，只需要绑定不同的handleItemSelection方法即可实现不同的业务逻辑

2. 路由加载的父子组件：使用共享服务 #

如果你的列表组件是通过UI Router的router-outlet加载的（即父组件是路由容器，子组件是路由页面），那么模板嵌套的@Output()无法直接生效。这时候可以用共享服务来实现跨组件事件传递。

步骤1：创建共享事件服务 #

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

@Injectable()
export class ItemSelectionService {
  // 定义事件发射器，用于传递选中的item
  itemSelected = new EventEmitter<any>();

  // 触发事件的方法
  emitItemSelection(item: any): void {
    this.itemSelected.emit(item);
  }
}

步骤2：在列表子组件中注入服务并触发事件 #

import { Component } from '@angular/core';
import { ItemSelectionService } from './item-selection.service';

@Component({
  selector: 'app-item-list',
  template: `
    <ul class="item-list">
      <li *ngFor="let item of items" 
          (click)="onItemClicked(item)"
          class="item-list__item">
        {{ item.label }}
      </li>
    </ul>
  `
})
export class ItemListComponent {
  items = [
    { id: 1, label: '路由子组件行1' },
    { id: 2, label: '路由子组件行2' }
  ];

  constructor(private itemSelectionService: ItemSelectionService) {}

  private onItemClicked(item: any): void {
    // 通过服务触发事件
    this.itemSelectionService.emitItemSelection(item);
  }
}

步骤3：在父路由组件中订阅事件 #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ItemSelectionService } from './item-selection.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-parent-router',
  template: `
    <h2>路由父组件</h2>
    <router-outlet></router-outlet>
    
    <div *ngIf="selectedItem" class="selected-item">
      路由子组件选中：{{ selectedItem.label }}
    </div>
  `
})
export class ParentRouterComponent implements OnInit, OnDestroy {
  selectedItem: any;
  // 保存订阅实例，防止内存泄漏
  private selectionSubscription: Subscription;

  constructor(private itemSelectionService: ItemSelectionService) {}

  ngOnInit(): void {
    // 订阅服务中的事件
    this.selectionSubscription = this.itemSelectionService.itemSelected.subscribe(item => {
      this.selectedItem = item;
      console.log('路由父组件收到选中项:', item);
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅
    if (this.selectionSubscription) {
      this.selectionSubscription.unsubscribe();
    }
  }
}

注意事项：

• 确保共享服务在合适的层级提供（比如父组件或模块级别），避免创建多个实例
• 一定要在组件销毁时取消订阅，防止内存泄漏

总结 #

• 对于模板嵌套的父子组件：优先使用@Output() + EventEmitter，这是Angular官方推荐的组件通信方式，最符合你的职责分离需求
• 对于路由加载的父子组件：使用共享服务来传递事件，记得管理好订阅的生命周期

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