Angular如何通过共享服务实现变量跨组件、跨服务全局调用

以下是基于你需求的完整实现步骤：

1. 创建公共共享服务 #

首先在common目录下创建共享服务，使用Angular根级注入保证全项目单实例：

// common/shared.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root' // 根级别注入，全项目只有一个服务实例
})
export class SharedService {
  // 用BehaviorSubject存储变量，默认值可根据业务调整
  private selectedValueSubject = new BehaviorSubject<string>('1');
  // 对外暴露可观察对象，支持响应式监听变量变化
  public selectedValue$ = this.selectedValueSubject.asObservable();

  // 同步获取当前变量值的方法
  get selectedValue(): string {
    return this.selectedValueSubject.value;
  }

  // 更新变量值的统一入口
  setSelectedValue(value: string): void {
    this.selectedValueSubject.next(value);
  }
}

2. 绑定app.component到共享服务 #

2.1 修改app.component.ts #

注入共享服务，不需要在组件内额外定义变量：

// app.component.ts
import { Component } from '@angular/core';
import { SharedService } from './common/shared.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = '你的项目名称';
  constructor(public sharedService: SharedService) {}
}

2.2 修改app.component.html #

调整下拉框和显示逻辑的绑定关系：

<!-- 原有代码保留，仅修改下拉选和显示部分 -->
<select class="form-control" id="selectedValue"
  [ngModel]="sharedService.selectedValue"
  (ngModelChange)="sharedService.setSelectedValue($event)">
  <option value="1">1</option>
  <option value="2">2</option>
</select>
<p>Selected value is {{sharedService.selectedValue}}</p>
<!-- 剩余原有代码保持不变 -->

3. 全项目任意位置调用变量 #

3.1 服务内同步调用（满足你的接口拼接需求） #

任意业务服务注入共享服务后即可直接取值：

// 任意业务服务示例
import { Injectable } from '@angular/core';
import { SharedService } from '../common/shared.service';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class PostService {
  constructor(
    private http: HttpClient,
    private sharedService: SharedService
  ) {}

  getPostDetail() {
    // 直接拼接变量到请求地址
    const requestUrl = `https://stackoverflow.com/posts/${this.sharedService.selectedValue}`;
    return this.http.get(requestUrl);
  }
}

3.2 响应式监听变量变化 #

如果有组件需要在变量更新时自动触发逻辑，订阅可观察对象即可：

// 任意组件的ngOnInit生命周期
ngOnInit(): void {
  this.sharedService.selectedValue$.subscribe(newValue => {
    // 变量变化时执行自定义逻辑
    console.log('当前选中值已更新为：', newValue);
  })
}

注意：禁止直接修改SharedService内部的selectedValueSubject属性，所有更新操作统一走setSelectedValue方法，避免全局状态不同步。

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