如何从Angular Service调用Component中的showSpinner等函数？

首先得说，你现在的代码里服务直接注入组件是典型的反模式——这会造成循环依赖（组件依赖服务，服务又依赖组件），而且严重违反了关注点分离原则：服务应该专注于业务逻辑和数据交互，不该直接操作UI组件的方法或属性。接下来我给你两种清晰的修复方案，你可以根据场景选择。

方案一：组件层面直接控制Spinner（最简单直接） #

既然postToken()是组件发起的，那完全可以在组件里控制Spinner的显示和隐藏，服务只负责处理HTTP请求和业务校验。

修改后的 component.ts #

import { throwError } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';

export class AuthenticatetokenComponent implements OnInit { 
  constructor(
    private authService: AuthService,
    private spinner: NgxSpinnerService,
    private _router: Router,
    private _dataservice: DataService,
    private elementRef: ElementRef
  ) {} 

  private showSpinner() { 
    this.spinner.show(); 
  } 

  private stopSpinner() { 
    this.spinner.hide(); 
  } 

  private postToken() { 
    // 调用服务前先显示Spinner
    this.showSpinner();
    
    this.authService.postToken(this.token).pipe(
      tap(data => {
        // 请求成功后的UI和路由操作
        this.elementRef.nativeElement.ownerDocument.body.style.backgroundColor = 'white';
        this._dataservice.electionFromService = data;
        this._dataservice.tokenFromService = this.token;
        this._router.navigateByUrl('/voting-page');
      }),
      catchError(err => {
        // 处理错误，弹出模态框
        this.openModal(err.message);
        return throwError(() => err);
      }),
      // 不管成功失败，最后都关闭Spinner
      finalize(() => this.stopSpinner())
    ).subscribe();
  } 
}

修改后的 service.ts #

import { HttpClient } from '@angular/common/http';
import { throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable() 
export class AuthService { 
  private BASE_URL: string = "http://localhost:8080"; 

  // 服务自己注入HttpClient，不要用组件的！
  constructor(
    private httpClient: HttpClient, 
    private _dataservice: DataService
  ) { } 

  postToken(token: string): Observable<any> { 
    // 先做参数校验，无效直接抛出错误
    if (token.trim() === '') {
      return throwError(() => new Error("Tokenveld is leeg! Voer aub een token in!"));
    }

    // 返回Observable，让组件订阅处理结果
    return this.httpClient.post(`${this.BASE_URL}/authentication`, { token: token }).pipe(
      catchError(err => {
        return throwError(() => new Error("This token is not valid"));
      })
    );
  } 

  getRestCall(): Observable<any[]> { 
    return this.httpClient.get<any[]>(`${this.BASE_URL}/test`);
  } 
}

这个方案的优势：

• 彻底解耦服务和组件，职责清晰
• 组件负责UI相关操作（Spinner、模态框、路由跳转），服务专注于数据请求和业务校验
• 用finalize确保Spinner一定会被关闭，避免出现加载指示器一直显示的问题

方案二：用RxJS Subject实现全局加载状态监听（适合多组件场景） #

如果你的应用有多个组件需要同步监听这个请求的加载状态（比如全局Spinner），可以在服务里用Subject发送状态，组件订阅状态来控制Spinner。

修改后的 service.ts #

import { HttpClient } from '@angular/common/http';
import { throwError, Subject } from 'rxjs';
import { catchError, finalize } from 'rxjs/operators';

@Injectable() 
export class AuthService { 
  private BASE_URL: string = "http://localhost:8080"; 
  // 创建Subject发送加载状态，外部只能订阅不能修改
  private loadingSubject = new Subject<boolean>();
  public loading$ = this.loadingSubject.asObservable();

  constructor(
    private httpClient: HttpClient, 
    private _dataservice: DataService
  ) { } 

  postToken(token: string): Observable<any> { 
    if (token.trim() === '') {
      return throwError(() => new Error("Tokenveld is leeg! Voer aub een token in!"));
    }

    // 发送加载开始状态
    this.loadingSubject.next(true);
    
    return this.httpClient.post(`${this.BASE_URL}/authentication`, { token: token }).pipe(
      catchError(err => {
        return throwError(() => new Error("This token is not valid"));
      }),
      // 请求结束（成功/失败）都发送加载结束状态
      finalize(() => this.loadingSubject.next(false))
    );
  } 

  getRestCall(): Observable<any[]> { 
    this.loadingSubject.next(true);
    return this.httpClient.get<any[]>(`${this.BASE_URL}/test`).pipe(
      finalize(() => this.loadingSubject.next(false))
    );
  } 
}

修改后的 component.ts #

import { Subscription } from 'rxjs';

export class AuthenticatetokenComponent implements OnInit, OnDestroy { 
  private loadingSubscription?: Subscription;

  constructor(
    private authService: AuthService,
    private spinner: NgxSpinnerService,
    private _router: Router,
    private _dataservice: DataService,
    private elementRef: ElementRef
  ) {} 

  ngOnInit() {
    // 订阅服务的加载状态，自动控制Spinner
    this.loadingSubscription = this.authService.loading$.subscribe(isLoading => {
      isLoading ? this.spinner.show() : this.spinner.hide();
    });
  }

  ngOnDestroy() {
    // 销毁订阅，避免内存泄漏
    this.loadingSubscription?.unsubscribe();
  }

  private postToken() { 
    this.authService.postToken(this.token).subscribe({
      next: (data) => {
        this.elementRef.nativeElement.ownerDocument.body.style.backgroundColor = 'white';
        this._dataservice.electionFromService = data;
        this._dataservice.tokenFromService = this.token;
        this._router.navigateByUrl('/voting-page');
      },
      error: (err) => {
        this.openModal(err.message);
      }
    });
  } 
}

这个方案适合需要全局同步加载状态的场景，比如多个组件共用同一个加载指示器。

关键注意点 #

1. 永远不要在服务中注入UI组件：这会导致强耦合，不仅难以测试，还会引发循环依赖问题。
2. 服务职责单一：服务只负责数据请求、业务逻辑处理，UI相关操作交给组件。
3. RxJS操作符的合理使用：finalize能确保不管请求成功还是失败，都执行收尾操作（比如关闭Spinner）；catchError用于统一处理错误。

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