Angular中如何从sibling2组件调用sibling1组件的myFunction方法？

兄弟组件之间直接调用方法确实行不通，因为它们彼此没有直接的引用关系。不过有两种靠谱的方式能解决这个问题，我给你详细说说：

方法一：通过父组件作为中间媒介 #

这种方式适合组件层级比较简单的场景，父组件充当两个子组件的通信桥梁：

1. 在父组件中获取子组件引用
   用@ViewChild装饰器分别获取Sibling1和Sibling2的实例：

   // parent.component.ts
   import { Component, ViewChild } from '@angular/core';
   import { Sibling1Component } from './sibling1.component';
   import { Sibling2Component } from './sibling2.component';
   
   @Component({
     selector: 'app-parent',
     template: `
       <app-sibling1></app-sibling1>
       <app-sibling2 (callSibling1Function)="onCallSibling1Function()"></app-sibling2>
     `
   })
   export class ParentComponent {
     @ViewChild(Sibling1Component) sibling1!: Sibling1Component;
   
     onCallSibling1Function() {
       this.sibling1.myFunction();
     }
   }
   

2. 在Sibling2中定义输出事件
   当按钮点击时，触发一个自定义事件通知父组件：

   // sibling2.component.ts
   import { Component, Output, EventEmitter } from '@angular/core';
   
   @Component({
     selector: 'app-sibling2',
     templateUrl: './sibling2.component.html'
   })
   export class Sibling2Component {
     @Output() callSibling1Function = new EventEmitter<void>();
   }
   

3. 修改Sibling2的模板
   按钮点击时触发输出事件：

   <!-- sibling2.component.html -->
   <button (click)="callSibling1Function.emit()">调用Sibling1的方法</button>
   

4. Sibling1的方法保持不变

   // sibling1.component.ts
   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-sibling1',
     templateUrl: './sibling1.component.html'
   })
   export class Sibling1Component {
     myFunction() {
       console.log('something');
     }
   }
   

方法二：使用共享服务（更推荐复杂场景） #

如果组件层级较深，或者多个组件需要通信，用共享服务会更灵活：

1. 创建共享服务
   用Subject来传递触发信号（如果需要初始值可以用BehaviorSubject）：

   // sibling-communication.service.ts
   import { Injectable } from '@angular/core';
   import { Subject } from 'rxjs';
   
   @Injectable({
     providedIn: 'root' // 根注入，整个应用可用
   })
   export class SiblingCommunicationService {
     private callSibling1Function$ = new Subject<void>();
   
     callSibling1Function() {
       this.callSibling1Function$.next();
     }
   
     getCallSibling1FunctionObservable() {
       return this.callSibling1Function$.asObservable();
     }
   }
   

2. 在Sibling1中订阅服务的信号
   组件初始化时订阅，收到信号就调用myFunction：

   // sibling1.component.ts
   import { Component, OnInit, OnDestroy } from '@angular/core';
   import { SiblingCommunicationService } from './sibling-communication.service';
   import { Subscription } from 'rxjs';
   
   @Component({
     selector: 'app-sibling1',
     templateUrl: './sibling1.component.html'
   })
   export class Sibling1Component implements OnInit, OnDestroy {
     private subscription!: Subscription;
   
     constructor(private communicationService: SiblingCommunicationService) {}
   
     ngOnInit() {
       this.subscription = this.communicationService.getCallSibling1FunctionObservable()
         .subscribe(() => {
           this.myFunction();
         });
     }
   
     ngOnDestroy() {
       this.subscription.unsubscribe(); // 避免内存泄漏
     }
   
     myFunction() {
       console.log('something');
     }
   }
   

3. 在Sibling2中调用服务的方法
   按钮点击时通过服务发送信号：

   // sibling2.component.ts
   import { Component } from '@angular/core';
   import { SiblingCommunicationService } from './sibling-communication.service';
   
   @Component({
     selector: 'app-sibling2',
     templateUrl: './sibling2.component.html'
   })
   export class Sibling2Component {
     constructor(private communicationService: SiblingCommunicationService) {}
   
     callSibling1Method() {
       this.communicationService.callSibling1Function();
     }
   }
   

4. 修改Sibling2的模板

   <!-- sibling2.component.html -->
   <button (click)="callSibling1Method()">调用Sibling1的方法</button>
   

总结 #

• 如果只是简单的兄弟组件通信，父组件作为中间层足够用了，实现起来直接。
• 如果组件结构复杂，或者未来可能有更多组件需要参与通信，共享服务是更 scalable 的方案，也符合 Angular 的响应式编程理念。

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