Angular组件间共享服务传递数据为空问题排查与解决

问题场景 #

在Angular项目中尝试用共享服务实现组件间数据共享：

• AppComponent初始化时通过HTTP请求获取分类数据，存入DataService，同时通过输入属性传给Header组件，Header能正常展示分类。
• 但路由跳转到PageCategoriesComponent后，在ngOnInit里调用DataService.getCategories()返回空值，就算等HTTP请求完成后点击按钮调用，依然返回空数组。

问题原因 #

1. 非响应式数据存储：最初的DataService大概率用普通变量存储数据，组件是同步取值，无法感知后续HTTP请求完成后的数据更新。
2. 服务非单例：PageCategoriesComponent的providers数组中配置了DataService，导致该组件会创建独立的服务实例，和AppComponent使用的不是同一个，自然拿不到已设置的数据。

解决方案 #

1. 改用BehaviorSubject实现响应式数据共享 #

BehaviorSubject属于RxJS，能保存当前最新值，订阅它的组件会自动收到数据更新通知。修改后的DataService代码如下：

@Injectable({
    providedIn: 'root',
})
export class DataService {
  private bSubject = new BehaviorSubject([]);

    getCategories() {
        return this.bSubject.asObservable();
    }

    setCategories(value: any) {
        return this.bSubject.next(value);
    }
}

2. 移除组件级的服务配置 #

确保DataService是全局单例，需要移除PageCategoriesComponent的providers配置（或设为空数组）：

@Component({
  selector: 'app-page-categories',
  templateUrl: './page-categories.component.html',
  styleUrl: './page-categories.component.css',
  providers: []
})

3. 修改PageCategoriesComponent的取值方式 #

因为getCategories现在返回Observable，需要通过订阅获取数据：

constructor(
    private _dataService: DataService
  ) { }

  ngOnInit() {
    this._dataService.getCategories().subscribe(categories => {
      console.log(categories);
      // 在这里处理分类数据
    });
  }

原相关代码参考 #

AppComponent代码 #

constructor(
    public _categoryService: CategoryService,
    private _dataService: DataService
  ){
    this.getCategories();
  }

  getCategories(){
    this._categoryService.getCategories().subscribe(
      response => {
        if(response.status == 'success'){
          this.categories = response.categories;
          this._dataService.setCategories(this.categories);

          // 这里能拿到值是因为在同一个服务实例里同步调用
          let categories = this._dataService.getCategories();
          console.log(categories);
        }
      },
      error => {
        console.log(<any>error);
      }
    );
  }

路由配置 #

// ROUTES DEFINITIONS
const appRoutes: Routes = [
    { path: '', component: PageHomeComponent },
    { path: 'categories', component: PageCategoriesComponent },
];

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