Angular 13中UserRoleService获取值为undefined的问题求助

问题根源 #

• 服务实例不共享：你的UserRoleService已经通过providedIn: 'root'注册为全局单例，但AppComponent的providers数组又添加了该服务，导致组件会创建一个独立的服务实例，和其他页面使用的不是同一个，数据自然无法同步。
• 异步时序错误：getUserRole里的HTTP请求是异步操作，你在ngOnInit中调用后立刻读取userRole，此时请求还未完成，_userRole仍未被赋值，所以返回undefined。

修复方案 #

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

删除AppComponent的providers配置，确保全应用使用同一个根级服务实例：

@Component({
  selector: 'app-root',
  // 移除该行：providers: [UserRoleService],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

2. 改造服务，用异步流管理状态 #

改用BehaviorSubject保存用户角色状态，让组件通过订阅获取最新数据，避免同步读取异步值的问题：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { UserRole } from './your-user-role-path'; // 替换为实际文件路径

@Injectable({
  providedIn: 'root'
})
export class UserRoleService {
  private _userRoleSubject = new BehaviorSubject<UserRole | null>(null);
  // 对外暴露只读的Observable
  public userRole$: Observable<UserRole | null> = this._userRoleSubject.asObservable();

  constructor(private _httpClient: HttpClient) {}

  getUserRole(): void {
    this._httpClient.get<UserRole>(this.requestUrlBase + "/role", { headers: this.h }).subscribe({
      next: (res: UserRole) => {
        this._userRoleSubject.next(res);
      },
      error: (err) => {
        console.error('获取用户角色失败', err);
        this._userRoleSubject.next(null);
      }
    });
  }

  // 可选：同步获取当前值（仅在确认数据已加载后使用）
  get currentUserRole(): UserRole | null {
    return this._userRoleSubject.value;
  }
}

3. 组件内正确订阅数据 #

在AppComponent中通过订阅userRole$获取异步返回的角色数据，确保数据返回后再赋值：

import { Component, OnInit } from '@angular/core';
import { UserRoleService } from './your-service-path'; // 替换为实际文件路径
import { UserRole } from './your-user-role-path';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  role!: UserRole | null;

  constructor(private userRoleService: UserRoleService) {}

  ngOnInit(): void {
    this.userRoleService.getUserRole();
    
    // 订阅获取最新角色数据
    this.userRoleService.userRole$.subscribe(role => {
      this.role = role;
      // 这里可以处理角色加载后的业务逻辑，比如权限判断、页面渲染等
    });
  }
}

可选优化：避免重复请求 #

给服务添加加载状态标记，防止多次调用API：

@Injectable({
  providedIn: 'root'
})
export class UserRoleService {
  private _userRoleSubject = new BehaviorSubject<UserRole | null>(null);
  public userRole$: Observable<UserRole | null> = this._userRoleSubject.asObservable();
  private isLoading = false;

  constructor(private _httpClient: HttpClient) {}

  getUserRole(): void {
    // 已有数据或正在请求时直接返回
    if (this._userRoleSubject.value || this.isLoading) return;
    
    this.isLoading = true;
    this._httpClient.get<UserRole>(this.requestUrlBase + "/role", { headers: this.h }).subscribe({
      next: (res: UserRole) => {
        this._userRoleSubject.next(res);
        this.isLoading = false;
      },
      error: (err) => {
        console.error('获取用户角色失败', err);
        this._userRoleSubject.next(null);
        this.isLoading = false;
      }
    });
  }
}

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