如何在同一页面的两个Angular组件间通过服务共享方法

嘿，这个问题太常见了——当多个组件出现重复的方法或属性时，把这些公共逻辑抽成Service是Angular里的最佳实践之一，既能减少冗余代码，后续维护起来也方便很多。我来一步步带你实现：

1. 创建共享Service #

首先我们要新建一个SharedService，把两个组件共有的方法都移到这个Service里：

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

@Injectable({
  providedIn: 'root' // 根注入器提供，全局单例模式
})
export class SharedService {
  // 把组件里的公共方法迁移到这里
  onSearch(): void {
    console.log('search');
  }

  onBtnClick(): void {
    // 这里写原本组件里的逻辑
    console.log('button clicked');
  }

  // 如果有公共属性，也可以放在这里统一维护
  public sharedInfo: string = '我是组件共享的属性';
}

2. 在组件中注入并使用Service #

接下来，我们需要在AppComponent1和AppComponent2中注入这个Service，然后用Service的方法代替组件原本的重复代码：

修改后的AppComponent1 #

import { Component } from '@angular/core';
import { SharedService } from './shared.service'; // 导入共享Service

@Component({
  selector: 'app',
  template: '<h1>AppComponent1</h1><button (click)="triggerSearch()">搜索</button><button (click)="triggerBtnClick()">点击</button>'
})
export class AppComponent1 {
  constructor(private sharedService: SharedService) {} // 注入Service

  triggerSearch(): void {
    this.sharedService.onSearch(); // 调用Service里的公共方法
  }

  triggerBtnClick(): void {
    this.sharedService.onBtnClick(); // 调用Service里的公共方法
  }
}

修改后的AppComponent2 #

import { Component } from '@angular/core';
import { SharedService } from './shared.service'; // 导入共享Service

@Component({
  selector: 'appTwo',
  template: '<h1>AppComponent2</h1><button (click)="triggerSearch()">搜索</button><button (click)="triggerBtnClick()">点击</button>'
})
export class AppComponent2 {
  constructor(private sharedService: SharedService) {} // 注入Service

  triggerSearch(): void {
    this.sharedService.onSearch(); // 调用Service里的公共方法
  }

  triggerBtnClick(): void {
    this.sharedService.onBtnClick(); // 调用Service里的公共方法
  }
}

额外小提示 #

• 因为我们设置了providedIn: 'root'，这个Service会是全局单例，两个组件注入的是同一个实例；如果需要每个组件拥有独立的Service实例，可以在组件的providers数组中声明该Service。
• 后续如果要修改公共方法的逻辑，只需要改动SharedService里的代码，所有用到的组件都会自动生效，不用逐个修改组件，维护效率直接拉满。

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