Angular服务间传递布尔变量遇undefined问题求助

问题根源分析 #

你遇到的undefined问题主要来自三个点：

1. AuthService中的Data变量未初始化，默认值就是undefined，只有调用passValueFunction()后才会变为true
2. SecondService的ngOnInit执行时机早于passValueFunction()的调用，此时变量还未被赋值
3. 如果服务注入方式错误（比如在组件providers中重复声明），会导致多个服务实例，SecondService拿到的是未赋值的新实例变量

解决方法 #

1. 确保服务为单例注入

在两个服务上都添加providedIn: 'root'，保证整个应用只有一个服务实例：

// auth.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  public Data: boolean;

  passValueFunction() {
    this.Data = true;
  }
}

// second.service.ts
import { Injectable, OnInit } from '@angular/core';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class SecondService implements OnInit {
  constructor(private authService: AuthService) {}

  ngOnInit() {
    console.log(this.authService.Data);
  }
}

2. 提前调用赋值方法

在应用初始化时（比如AppComponent的ngOnInit）先调用passValueFunction()，确保SecondService读取时变量已赋值：

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent implements OnInit {
  constructor(private authService: AuthService) {}

  ngOnInit() {
    this.authService.passValueFunction();
  }
}

3. 推荐：用响应式方式传递状态（避免时机问题）

直接访问变量容易受执行时机影响，用BehaviorSubject实现响应式状态共享是Angular的标准做法：

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

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private dataSubject = new BehaviorSubject<boolean>(false);
  public data$ = this.dataSubject.asObservable();

  passValueFunction() {
    this.dataSubject.next(true);
  }
}

// second.service.ts
import { Injectable, OnInit } from '@angular/core';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class SecondService implements OnInit {
  constructor(private authService: AuthService) {}

  ngOnInit() {
    this.authService.data$.subscribe(data => {
      console.log(data); // 调用passValueFunction后会收到true
    });
  }
}

内容的提问来源于stack exchange，提问作者Abi.D