Angular 5共享服务未向父组件更新数据问题求助

嘿，作为Angular 5新手遇到这个共享服务数据更新不同步的问题太正常啦，我来帮你搞定它～

问题根源 #

你的共享服务里直接修改了UserTrans.ListDetail数组，但父组件如果只是在初始化时获取了一次UserTrans对象，Angular的变更检测机制不会自动感知到对象内部数组的变化——因为对象的引用没改，只是内部数据变了，父组件的视图不会自动更新。

解决方案：用RxJS的BehaviorSubject实现数据订阅 #

我们可以借助RxJS的BehaviorSubject来实现数据的发布-订阅模式，这样每当服务里的数据更新时，所有订阅的组件都会收到通知，自动更新视图。

第一步：修改你的共享服务代码

import { Injectable } from '@angular/core';
import { DetailTransaksi } from '../models/DetailTransaksiModel';
// Angular 5中RxJS的导入路径是这个，注意和新版本区分
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class TransaksiService {
  // 用BehaviorSubject保存当前的Transaksi对象，初始值是新创建的实例
  private userTransSubject = new BehaviorSubject<Transaksi>(new Transaksi());
  // 暴露一个可观察对象给组件订阅，外部只能订阅不能修改
  userTrans$ = this.userTransSubject.asObservable();

  constructor() { }

  // 获取当前的Transaksi值
  getTransaksi(): Transaksi {
    return this.userTransSubject.value;
  }

  addDetail(data: DetailTransaksi) {
    // 先获取当前的Transaksi对象
    const currentTrans = this.userTransSubject.value;
    // 添加新的明细
    currentTrans.ListDetail.push(data);
    // 发送更新后的对象，通知所有订阅者
    this.userTransSubject.next(currentTrans);
  }

  countDetail(): number {
    return this.userTransSubject.value.ListDetail.length;
  }
}

第二步：父组件订阅数据变化

在父组件里订阅服务的userTrans$可观察对象，这样每次数据更新时，父组件都会收到最新的状态并更新视图：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { TransaksiService } from './path-to-your-service/transaksi.service';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'app-parent',
  template: `
    <div>当前明细总数：{{ detailCount }}</div>
    <router-outlet></router-outlet>
  `
})
export class ParentComponent implements OnInit, OnDestroy {
  detailCount: number;
  // 保存订阅对象，组件销毁时要取消订阅防止内存泄漏
  private transSubscription: Subscription;

  constructor(private transService: TransaksiService) { }

  ngOnInit() {
    // 订阅数据变化，每次更新时同步明细数量
    this.transSubscription = this.transService.userTrans$.subscribe(transaksi => {
      this.detailCount = transaksi.ListDetail.length;
      // 如果需要展示其他数据，也可以在这里更新
    });
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅
    if (this.transSubscription) {
      this.transSubscription.unsubscribe();
    }
  }
}

关键注意点

• 确保服务是真正的单例：一定要只在AppModule的providers数组里注册这个服务，不要在父组件或子组件的providers里重复注册，否则会创建多个服务实例，数据自然无法共享。
• 取消订阅很重要：组件销毁时一定要取消订阅，避免内存泄漏，这在Angular 5里需要手动处理（新版本有async管道可以自动处理，但Angular 5还是得手动unsubscribe）。

替代方案（不推荐，但应急可用） #

如果你暂时不想用RxJS，也可以在父组件模板里直接调用服务的countDetail()方法，但要注意Angular的变更检测策略：

<div>当前明细总数：{{ transService.countDetail() }}</div>

这种方式的缺点是每次Angular触发变更检测时都会调用这个方法，性能不如订阅Observable高效，所以更推荐用前面的RxJS方案。

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