如何从router-outlet内的页面调用兄弟组件的方法？

我之前在Angular项目里正好遇到过一模一样的需求，给你分享几个靠谱的实现方案，按推荐程度排序：

方案一：用共享服务（最推荐，解耦性强） #

这是Angular官方最推崇的跨组件通信方式，完全解耦两个组件，不管它们的层级关系如何都能生效。

步骤： #

1. 创建共享服务
   生成一个服务（比如GeneralComponentCommService），用RxJS的Subject来传递事件：

   import { Injectable } from '@angular/core';
   import { Subject } from 'rxjs';
   
   @Injectable({ providedIn: 'root' })
   export class GeneralComponentCommService {
     // 定义一个Subject，用来发送调用方法的信号
     private callGeneralMethod$ = new Subject<void>();
   
     // 供页面组件调用的方法，触发信号
     triggerGeneralMethod() {
       this.callGeneralMethod$.next();
     }
   
     // 供通用组件订阅的Observable
     getCallGeneralMethodObservable() {
       return this.callGeneralMethod$.asObservable();
     }
   }
   

2. 在通用组件中订阅信号
   在general-component里注入这个服务，订阅信号并执行目标方法：

   import { Component, OnInit, OnDestroy } from '@angular/core';
   import { GeneralComponentCommService } from './general-component-comm.service';
   import { Subscription } from 'rxjs';
   
   @Component({
     selector: 'general-component',
     templateUrl: './general-component.component.html'
   })
   export class GeneralComponent implements OnInit, OnDestroy {
     private subscription!: Subscription;
   
     constructor(private commService: GeneralComponentCommService) {}
   
     ngOnInit() {
       // 订阅信号，收到后执行自己的方法
       this.subscription = this.commService.getCallGeneralMethodObservable()
         .subscribe(() => {
           this.yourTargetMethod();
         });
     }
   
     // 你要调用的通用组件方法
     yourTargetMethod() {
       console.log('通用组件的方法被调用了！');
       // 这里写你的业务逻辑
     }
   
     ngOnDestroy() {
       // 记得销毁订阅，防止内存泄漏
       this.subscription.unsubscribe();
     }
   }
   

3. 在Router-Outlet内的页面组件中触发信号
   随便哪个页面组件，注入服务后调用triggerGeneralMethod()即可：

   import { Component } from '@angular/core';
   import { GeneralComponentCommService } from '../general-component-comm.service';
   
   @Component({
     selector: 'home-page',
     templateUrl: './home-page.component.html'
   })
   export class HomePageComponent {
     constructor(private commService: GeneralComponentCommService) {}
   
     // 页面里的某个按钮或事件触发调用
     callGeneralComponentMethod() {
       this.commService.triggerGeneralMethod();
     }
   }
   

方案二：通过父组件中转（耦合性稍高，适合小型项目） #

如果你的项目比较小，或者两个组件的父组件固定，可以直接通过父组件来做中转：

步骤： #

1. 父组件中获取通用组件实例
   在包含router-outlet和general-component的父组件模板里给通用组件加模板引用：

   <div>
     <router-outlet></router-outlet>
     <general-component #generalComp></general-component>
   </div>
   

   然后在父组件类里用ViewChild获取实例，并暴露一个调用方法：

   import { Component, ViewChild } from '@angular/core';
   import { GeneralComponent } from './general-component/general-component.component';
   
   @Component({
     selector: 'app-parent',
     templateUrl: './parent.component.html'
   })
   export class ParentComponent {
     @ViewChild('generalComp') generalComponent!: GeneralComponent;
   
     // 暴露给子页面调用的方法
     callGeneralComponentMethod() {
       this.generalComponent.yourTargetMethod();
     }
   }
   

2. 页面组件中调用父组件的方法
   在Router-Outlet内的页面组件里，通过注入父组件来调用方法：

   import { Component } from '@angular/core';
   import { ParentComponent } from '../parent/parent.component';
   
   @Component({
     selector: 'service-page',
     templateUrl: './service-page.component.html'
   })
   export class ServicePageComponent {
     // 直接注入父组件（需要确保父组件是当前组件的直接父级）
     constructor(private parentComp: ParentComponent) {}
   
     triggerGeneralMethod() {
       this.parentComp.callGeneralComponentMethod();
     }
   }
   

方案三：用Angular的Output和Router事件（不推荐，耦合性高） #

这个方案需要父组件监听路由变化，然后页面组件通过Output向父组件发事件，父组件再调用通用组件方法，耦合性很高，只适合特殊场景，这里简单提一下：

页面组件定义Output：

@Output() callGeneralMethod = new EventEmitter<void>();

父组件模板里给router-outlet绑定事件：

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

父组件类里保存激活的组件实例，订阅它的Output：

private activePageComponent!: any;

onOutletActivate(component: any) {
  this.activePageComponent = component;
  if (this.activePageComponent.callGeneralMethod) {
    this.activePageComponent.callGeneralMethod.subscribe(() => {
      this.generalComponent.yourTargetMethod();
    });
  }
}

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