Angular 5服务数据不更新求助：从AngularJS迁移遇问题

嘿，我刚帮几个朋友搞定过AngularJS转Angular时的类似问题，你遇到的这个数据同步失效的情况，其实是两个框架的变更检测和数据绑定逻辑不一样导致的，咱们一步步来解决它：

在Angular里，服务依然是单例的，但默认情况下组件不会自动监听服务中普通变量的变化。要复刻AngularJS那种“一处更新处处同步”的效果，最标准、最优雅的做法是利用RxJS的Subject/BehaviorSubject创建可观察数据流，让组件订阅这个流，数据更新时自动收到通知。

第一步：创建带可观察对象的共享服务 #

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

@Injectable({
  providedIn: 'root' // 这行确保服务是全局单例
})
export class SharedDataService {
  // BehaviorSubject会保存当前最新值，新订阅的组件能立即拿到现有数据
  private _sharedData = new BehaviorSubject<string>('初始默认值');
  // 对外暴露只读的可观察对象，避免外部直接修改源数据
  sharedData$ = this._sharedData.asObservable();

  // 专门的更新方法，统一管理数据变更
  updateSharedData(newValue: string) {
    this._sharedData.next(newValue);
  }
}

第二步：在组件中订阅数据流 #

在需要使用共享数据的组件里，订阅服务的sharedData$，记得在组件销毁时取消订阅（避免内存泄漏）：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { SharedDataService } from './shared-data.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-component-a',
  template: `<p>当前共享数据：{{ currentData }}</p>`
})
export class ComponentA implements OnInit, OnDestroy {
  currentData: string;
  private dataSubscription: Subscription;

  constructor(private sharedDataService: SharedDataService) {}

  ngOnInit() {
    // 订阅数据流，数据变化时自动更新组件变量
    this.dataSubscription = this.sharedDataService.sharedData$.subscribe(data => {
      this.currentData = data;
    });
  }

  ngOnDestroy() {
    // 组件销毁时必须取消订阅
    this.dataSubscription.unsubscribe();
  }
}

第三步：在任意地方更新共享数据 #

不管是在另一个组件还是其他服务里，调用updateSharedData方法更新数据，所有订阅了sharedData$的组件都会自动同步最新值：

import { Component } from '@angular/core';
import { SharedDataService } from './shared-data.service';

@Component({
  selector: 'app-component-b',
  template: `<button (click)="refreshData()">更新共享数据</button>`
})
export class ComponentB {
  constructor(private sharedDataService: SharedDataService) {}

  refreshData() {
    this.sharedDataService.updateSharedData('刚刚更新的新数据');
  }
}

为什么不用普通变量？ #

如果直接在服务里定义public sharedData: string = '初始值'，修改它时组件不会自动更新——因为Angular的变更检测不会主动监听服务变量的变化。就算你手动用ChangeDetectorRef.detectChanges()触发检测，也不够优雅，还容易带来不必要的性能开销，远不如RxJS数据流方案可靠。

额外小技巧：用async管道简化代码 #

你还可以用Angular的async管道自动管理订阅和取消订阅，省去组件类里的订阅逻辑：

<!-- 直接在模板里使用async管道 -->
<p>当前共享数据：{{ sharedDataService.sharedData$ | async }}</p>

这样Angular会帮你处理订阅和销毁时的清理工作，代码更简洁。

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