2

我正在尝试使用共享服务的组件制作一个模块。一个组件（graphview）订阅了一个 BehaviorSubject 的 observable。另一个组件 ( chart-type ) 稍后通过调用服务 ( chart-config ) 中的函数来更新 BehaviorSubject。问题是服务调用何时不ChartTypeComponent更新。我假设正在使用该服务的多个实例，但我不确定如何修复它。.next(data)GraphviewComponent

GraphModule（它们的父模块）在声明中具有ChartTypeComponent和在提供者中。GraphviewComponentChartConfigService

chart-config.service.ts看起来像：

@Injectable()
export class ChartConfigService {
  private _chartconfig: BehaviorSubject<any> = new BehaviorSubject<any>({});
  public chartconfig = this._chartconfig.asObservable();
  private headers = new Headers({ 'Content-Type': 'application/json', 'charset': 'UTF-8' });
  private options = new RequestOptions({ headers: this.headers });

  constructor(private http: Http) {
      http.get('/api/chartconfig/59484e3946f7f059f1e72927')
      .map(res => res.json())
      .subscribe( data => this._chartconfig.next(data) );
    }

  getChartConfig(): Observable<any> {
    return this.chartconfig;
  }

  updateChartConfig(option, params) {
    this.http.put('/api/chartconfig/59484e3946f7f059f1e72927', '{ ' + JSON.stringify(option) + ': ' + JSON.stringify(params) + ' }' , this.options)
      .map(res => res.json())
      .subscribe( data => this._chartconfig.next(data) );
  }

graphview.component.ts导入服务和订阅。它不提供服务。

@Component({
  selector: 'app-graphview',
  templateUrl: './graphview.component.html',
  styleUrls: ['./graphview.component.scss']
})

和

  constructor(private chartconfigService: ChartConfigService) { }

  ngOnInit() {
    this.subscription = this.chartconfigService.chartconfig
      .subscribe( data => this.localChartConfig = data );
  }

chart-type.component.ts仅导入服务，并调用 chartconfigService.updateChartConfig ：

@Component({
  selector: 'app-chart-type',
  templateUrl: './chart-type.component.html',
  styleUrls: ['./chart-type.component.scss']
})

和

  chartType(param: string) {
    this.chartconfigService.updateChartConfig('type', param);
  }

我找到了相关的问题和答案：

委托：Angular2 中的 EventEmitter 或 Observable

Angular2 Observable BehaviorSubject 服务不工作

但我无法弄清楚我做错了什么。如何在调用 updateChartConfig 时让graphview.component.ts更新？

注意：所有调用/方法/等都有效，并且在调用 updateChartConfig() 后this._chartconfig.next(data).getValue()显示 BehaviorSubject 正在服务中正确更新。graphview.component.ts 根本没有接收到新数据。

更新：

GraphviewComponent将s ngOnInit()更改为的结果

  ngOnInit() {
    this.subscription = this.chartconfigService.chartconfig
      .subscribe( data => { this.localChartConfig = data; console.log('in subscription: ' + this.localChartConfig); }, e => console.log('error: ' + e), () => console.log('then: ' + this.localChartConfig) );
  }

在控制台中生成：

in subscription: [object Object]
in subscription: [object Object]

但是在 OnInit 之后永远不会触发（当ChartTypeComponent调用 updateChartConfig() 时）。

更新 2： 很明显根是在注入服务，而不是 GraphModule： 服务树

服务树 2

我仍然希望子模块提供服务，以便它包含在子模块中。

4

0 回答 0