Question

我正在使用angular2-progressbar库在我的应用中显示一些循环进度条。我有一个库存项目列表和一个更新库存清单的服务。每个库存物料组件从库存清单中的键获取更新的库存值，如下所示：

export class InventoryComponent implements OnInit {
  @ViewChild(CircleProgressComponent): circleComp: CircleProgressComponent;
  @Input() deviceKey: string;
  private circleOptions: ShapeOptions { /* from angular2-progressbar example */ }
  constructor(private inventoryService: InventoryService) { }
  ngOnInit(): void {
    this.deviceList = this.inventoryService.deviceList;
    setInterval(() => {
      // this value will be 0 or 1
      this.circleComp.animate(this.deviceList[this.deviceKey]);
    }, 2000);
  }
}

虽然这确实有效，但每当inventoryService更新其设备列表时模板本身的实际值立即更新时，我每隔2秒就检查一次间隔检查似乎非常麻烦。

我尝试实施OnChange，但有两个问题：

初始change在视图初始生命周期之前触发，即在circleComp可用之前触发。这打破了事情。
因为this.deviceList是一个对象，并且其属性在内部得到更新，所以OnChange无论如何都不会被解雇。相反，我可以使用ngDoCheck进行额外检查 - 这确实有效，但它更冗长，＃1仍会导致问题。

在加载视图后，有没有办法开始执行检查？

Answer 1

在视图加载后有没有办法开始执行检查？

使用AfterViewInit生命周期挂钩（覆盖ngAfterViewInit）。这是@ViewChild可用的时候

我认为可能有比轮询deviceList更好的解决方案。您可以在服务中使用Subject。这将像观察者和观察者一样，因此您可以在一端订阅它，在另一端发布。例如

import { BehaviorSubject } from 'rxjs/BehaviorSubject'

class InventoryService {
  private _inventoryList = new BahaviorSubject<any>({ initialize with data })

  inventoryList$ = this._inventoryList.asObservable();

  set inventoryList(list: any) {
    this._inventoryList.next(list);
  }
}

现在您可以订阅列表。每当您想要更新它时，只需使用setter，所有订阅者都将获得更新列表。无需民意调查。

订户

service.inventoryList$.subscribe(list => {})

出版商

service.inventoryList = newList

另见：

Using Subjects

使用Angular2

1 个答案: