Question

我正在使用Angular 7，ngrx/store。我有这样的问题-我有困难的绘图操作（jointjs大图渲染），我想在此操作过程中向用户显示加载程序。但是，这种困难的操作会阻止模板渲染。这是简化的example：

@Component({
  selector: 'hello',
  template: `
    <h1 *ngIf="isLoading">Loading...</h1>
    <button (click)="onClick()">click</button>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  isLoading = false;
  @Input() name: string;

  onClick() {
    this.isLoading = true;
    console.log('start calculation')
    this.runHardOperation();
    this.isLoading = false;
    console.log('end calculation')
  }

  runHardOperation() {
    var arr = new Array(12000000);
    arr.fill('abcd');
    arr.forEach((a, i, arr) => arr[i] = Math.random());
  }
}

当我们按下按钮时-加载程序应该可见，但是硬操作会阻止模板渲染，并且不起作用。如果我们用setTimeout换行，将会有所帮助：

this.runHardOperation();
this.isLoading = false;
console.log('end calculation')

但是我的应用程序无法正常工作。

我有一个组件，该组件调度动作以在init上开始渲染图（硬操作）：

ngOnInit() {
  this.store.dispatch(new DrawDiagram());
}

然后我对此有影响

@Effect({ dispatch: false })
  updateDiagram$ = this.actions$.pipe(
    ofType<DrawDiagram>(DrawDiagram),
    map((action) => {
      this.diagramService.drawDiagram();
    })
  );

我尝试过： 1）

ngOnInit() {
      this.loaderService.showLoader();
      this.store.dispatch(new DrawDiagram());
      this.loaderService.hideLoader();
    }

2）生效相同

3）创建具有效果的多个动作，例如：StartDrawing => ShowLoader => Drawing => EndDrawing => HideSpinner

但这没有帮助。对我来说奇怪的是，这里的console.log语句按预期记录-first 'start' => then wait until drawing finish => 'end'：

ngOnInit() {
      console.log('start')
      this.store.dispatch(new DrawDiagram());
      console.log('end')
}

为什么这样工作，如何获得想要的东西？

角硬操作块模板渲染

0 个答案: