角6 UI未更新

Question

我有三个组件：

c1包含c2和c3

c2包含一个复选框。当选中复选框时，我会将一个事件触发到一个输出变量。

<input type="checkbox" [checked]="displayAxialMap" (click)="onToggleAxialMap()" />

在构成部分：

onToggleAxialMap() {
    this.displayAxialMap = !this.displayAxialMap;
    this.toggleMap.emit(<Map>{ display: this.displayAxialMap, mapType: MapType.AXIALMAP, loading: true });
}

在c1中，我有一个名为displayMap的behaviourSubject

<c2 (toggleMap)="displayMap.next($event)"></c2>

在c1中，我还将displayMap值传递给c3

<c3 [displayMap]="displayMap"></c3>

c3 in ngOnInit()我这样做：

this.displayMap.subscribe(map => {
   this.loading = map.loading;
   this.drawAxialMapCanvas();
   this.loading = false;
}) 

this.loading被初始化为false。

一切都正常工作(因此在传递数据通过组件时没有问题)。但是this.drawAxialMapCanvas()；是一个需要很长时间才能完成的函数(3-4秒)，我看到了两种约束行为：

1. c2中的复选框将更改为仅在this.drawAxialMapCanvas()完成时选中。
2. c3中的局部变量“加载”(如果我调试代码)将正确地从false传递到true to false。但是如果我把这个变量放在模板中：

<.*如果“装载”>装载.

它从未出现..。它只需要最后一个值！

我的UI似乎只有在this.drawAxialMapCanvas()完成时才会更新。我做错什么了？

Answer 1

对于1)它是正常的，javascript是单线程，所以所有的东西都被this.drawAxialMapCanvas阻塞了

2)您尝试显示加载消息，但是这里有相同的问题，由于the.drawAxialMap没有完成并阻塞线程，因此角没有更新(对于非异步加载来说，4秒确实很长)。

首先，可以通过执行以下操作使this.drawAxialMap在下一个事件循环中运行：

this.displayMap.subscribe(map => {
   this.loading = map.loading;
   setTimeout( () => {
    this.drawAxialMapCanvas();
    this.loading = false;
   )};
});

它会让刷新的时间(复选框，消息..)

无论如何，您应该对this.drawAxialMapCanvas()做一些事情；我从来没有遇到过这种情况，但是我可能会使用一个工作人员或者通过使用诸如setTimeout() / setImmediate()之类的东西来部分加载用户事件，让UI有时间管理用户事件等等……