使用Angular2中更新的嵌套值调用ViewChild方法_Angular_Typescript

使用Angular2中更新的嵌套值调用ViewChild方法

angular typescript

使用Angular2中更新的嵌套值调用ViewChild方法,angular,typescript,Angular,Typescript,我正在使用库在我的应用程序中显示一些圆形进度条。我有一个库存项目列表和一个更新库存列表的服务。每个库存项目组件从库存列表中的一个键获取更新的库存值，如下所示： export class InventoryComponent implements OnInit { @ViewChild(CircleProgressComponent): circleComp: CircleProgressComponent; @Input() deviceKey: string; private ci

我正在使用库在我的应用程序中显示一些圆形进度条。我有一个库存项目列表和一个更新库存列表的服务。每个库存项目组件从库存列表中的一个键获取更新的库存值，如下所示：

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仍然会导致问题

是否有任何方法可以在加载视图后开始执行检查

使用

AfterViewInit

生命周期挂钩（覆盖

ngAfterViewInit

）。此时

@ViewChild

可用

我认为可能有比轮询设备列表更好的解决方案。您可以在服务中使用

主题

。这就像一个观察者和可观察者，所以你可以在一端订阅它，在另一端发布。比如说

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);
  }
}

出版者

service.inventoryList = newList

另请参见：