Angular 17中如何通过Service实现组件间数据共享？

问题现状 #

你尝试通过ThemeService在非关联的独立组件间共享主题值，但实际运行后发现两个组件的主题值不同步：

• 期望控制台输出：

app.component: light
app.component: dark
mycomponent.component: dark

• 实际控制台输出：

app.component: light
app.component: dark
mycomponent.component: light

问题原因 #

你的推测完全正确：两个组件使用了ThemeService的不同实例。因为你在AppComponent和MyComponent的@Component装饰器中都添加了providers: [ThemeService]配置，这会让Angular为每个组件单独创建一个服务实例，而非使用根注入器的单例。

解决方案 #

1. 移除组件内的服务注册 #

由于你的ThemeService已经通过@Injectable({ providedIn: 'root' })声明为根级单例服务，无需再在组件的providers数组中注册。直接移除两个组件中的providers: [ThemeService]配置即可。

2. 优化服务实现（可选但推荐） #

如果需要组件实时响应主题变化，建议用BehaviorSubject替代简单的属性，实现响应式主题更新：

修改后的theme.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class ThemeService {
  // 用BehaviorSubject存储主题状态，初始值为light
  private _themeSubject = new BehaviorSubject<'light'|'dark'>('light');
  // 对外暴露只读的可观察对象，避免外部直接修改Subject
  public theme$ = this._themeSubject.asObservable();

  // 获取当前主题值
  public get theme() {
    return this._themeSubject.value;
  }

  // 设置主题的方法
  public setTheme(theme: 'light'|'dark') {
    this._themeSubject.next(theme);
  }

  constructor() { }
}

修改后的app.component.ts

import { Component, AfterViewInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ThemeService } from './services/theme.service';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  // 移除providers配置
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements AfterViewInit {

  constructor(private themeService: ThemeService) { }

  ngAfterViewInit() {
    console.log("app.component:", this.themeService.theme);
    this.themeService.setTheme("dark");
    console.log("app.component:", this.themeService.theme);
  }
}

修改后的mycomponent.component.ts

import { Component, AfterViewInit } from '@angular/core';
import { ThemeService } from '../../services/theme.service';

@Component({
  selector: 'app-mycomponent',
  standalone: true,
  imports: [],
  // 移除providers配置
  templateUrl: './mycomponent.component.html',
  styleUrl: './mycomponent.component.scss'
})
export class MyComponent implements AfterViewInit {

  constructor(private themeService: ThemeService) { }

  ngAfterViewInit() {
    console.log("mycomponent.component:", this.themeService.theme);
    // 可选：订阅主题变化，实时响应
    this.themeService.theme$.subscribe(theme => {
      console.log("mycomponent实时主题:", theme);
    });
  }
}

原理说明 #

• providedIn: 'root'会让Angular在根注入器创建服务的单例实例，所有组件注入的都是同一个对象。
• 移除组件的providers配置后，组件会向上查找注入器，最终从根注入器获取单例服务，实现状态共享。
• 使用BehaviorSubject可以让组件订阅主题变化，当主题更新时，所有订阅的组件都会自动收到最新值，更符合Angular的响应式编程理念。

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