Question

我试图让另一个组件添加新行时重新绘制图表组件。我使用一个服务来连接这两个，并认为BehaviourSubject将是要走的路，但显然我还没有正确理解一些东西。

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from "rxjs/Rx";

@Injectable()
export class LineService
{
    private allLines:BehaviorSubject<Array<any>> = new BehaviorSubject([]);

    constructor()
    {}

    public getAllLines(): Observable<Array<any>>
    {
        return this.allLines.asObservable();
    }

    public addLine(line: any)
    {
        this.allLines.getValue().push(line);
        // this.allLines.next(line); <- this was wrong!
        this.allLines.next(this.allLines.getValue()); // <- emit the entire array
    }
}

图表组件然后订阅服务

ngOnInit()
{
  this.lineService.getAllLines().subscribe(l => { 
         this.lines = l;
         this.reDrawChart(); // <- need to manually trigger redraw, ngOnChanges is not called by the subscription
      });
}

我认为一旦ngOnChanges被其他组件调用，这足以触发图表组件中的addLine，但事实并非如此。
显然我没有正确理解某些东西，并希望有人指出我正确的方向！

Answer 1

它似乎工作正常。我猜你的期望是别的。

我认为（我可能错了）更新您的图表（我认为您需要整个数组而不是单个值）。

这里我尝试复制你的问题。

的 http://plnkr.co/edit/ACiKrXsVQErxBkE18IzW?p=preview

检查黄色和粉红色部分。黄色部分获得单一值，而粉红色部分获得整个数组。

我认为（我可能错了）

public addLine(line: any) { this.allLines.getValue().push(line); //this.allLines.next(line); this.allLines.next(this.allLines.getValue()); //<----I believe this.allLines.getValue() returns array elements. }

如果它没有给出你想要的东西，我准备删除这个答案。

Angular2 - 订阅服务数据的更改

1 个答案: