Angular 2中如何从子组件更新父组件（Router Outlet场景）

当子组件通过<router-outlet>加载时，确实没法直接用@Output()和EventEmitter来传递事件——因为父组件模板里没有显式声明子组件标签，自然没法绑定输出事件。不过有几种常用的方案可以解决这个问题，最推荐的是共享服务+RxJS的方式，下面详细说：

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

这是Angular中处理路由组件间通信的标准做法，解耦性强，适合大多数场景。

步骤1：创建共享服务 #

先建一个全局的服务，用BehaviorSubject（或者Subject）来充当数据传递的桥梁：

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

@Injectable({ providedIn: 'root' })
export class DataSharingService {
  // 用BehaviorSubject可以保存当前值，新订阅者能拿到最新数据
  private _childDataUpdated = new BehaviorSubject<any>(null);
  // 暴露可观察对象，防止外部直接修改Subject
  childDataUpdated$ = this._childDataUpdated.asObservable();

  // 子组件调用这个方法发送更新数据
  emitChildData(data: any) {
    this._childDataUpdated.next(data);
  }
}

步骤2：父组件订阅数据更新 #

在父组件里订阅服务的可观察对象，一旦子组件发送数据，就触发父组件的更新逻辑：

// parent.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { DataSharingService } from './data-sharing.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-parent',
  template: `
    <div>父组件内容：{{ parentData }}</div>
    <router-outlet></router-outlet>
  `
})
export class ParentComponent implements OnInit, OnDestroy {
  parentData: any;
  private _subscription!: Subscription;

  constructor(private dataSharingService: DataSharingService) {}

  ngOnInit() {
    // 订阅子组件的数据更新
    this._subscription = this.dataSharingService.childDataUpdated$.subscribe(data => {
      if (data) {
        this.parentData = data;
        // 这里可以写父组件的其他更新逻辑，比如刷新列表、重新请求接口等
        console.log('父组件收到子组件的更新:', data);
      }
    });
  }

  ngOnDestroy() {
    // 记得销毁订阅，防止内存泄漏
    this._subscription.unsubscribe();
  }
}

步骤3：子组件触发数据更新 #

在子组件里注入共享服务，当需要更新父组件时，调用服务的方法发送数据：

// child.component.ts
import { Component } from '@angular/core';
import { DataSharingService } from './data-sharing.service';

@Component({
  selector: 'app-child',
  template: `
    <div>子组件内容</div>
    <button (click)="updateParent()">点击更新父组件</button>
  `
})
export class ChildComponent {
  constructor(private dataSharingService: DataSharingService) {}

  updateParent() {
    // 这里可以是子组件的任何更新数据，比如表单值、用户操作结果等
    const updatedData = { name: '更新后的内容', id: 123 };
    this.dataSharingService.emitChildData(updatedData);
  }
}

方案二：利用路由器事件（适合简单场景） #

如果只是需要在子组件路由激活/数据变化时通知父组件，也可以监听路由器的NavigationEnd事件，结合ActivatedRoute获取子组件的参数或数据：

// parent.component.ts
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs';

@Component({
  selector: 'app-parent',
  template: `<router-outlet></router-outlet>`
})
export class ParentComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit() {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      // 每次路由结束后，可以根据当前路由判断是否是目标子组件，然后更新父组件
      if (this.router.url.includes('/child-path')) {
        // 执行父组件更新逻辑
        console.log('子组件路由已激活，更新父组件');
      }
    });
  }
}

不过这种方式只能感知路由变化，没法传递具体的业务数据，适合简单的场景。

不推荐的方案：直接获取父组件实例 #

虽然可以通过ActivatedRoute.parent获取父组件的实例，然后调用父组件的方法，但这种方式会让组件间耦合度极高，后期维护成本大，不建议使用。

总结一下，共享服务+RxJS是最灵活、最符合Angular设计理念的方案，不管子组件是通过路由加载还是直接声明，都能很好地工作。

内容的提问来源于stack exchange，提问作者Aakriti.G