angular - 如何在 View 初始化后运行代码并且 Promise 从 Angular 2 中的数据库返回数据

Question

我认为代码会说明一切。

export class CanvasComponent implements AfterViewInit, OnInit {
    @ViewChild('masterCanvas') canvas: ElementRef;

    width = 800;
    height = 400;

    constructor(private canvasUriService: CanvasUriService) { }

    drawingPad: DrawingPad;
    uri: string;

    ngAfterViewInit(): void {
        // Get the canvas object from DOM
        const canvasElement: HTMLCanvasElement = this.canvas.nativeElement;
        canvasElement.width = this.width;
        canvasElement.height = this.height;

        const drawingPad = new DrawingPad(canvasElement, {
            // backgroundColor: 'rgb(0, 0, 0)',
            // penColor: '#b29600',
        });


        drawingPad.fromDataURL(this.uri);
        this.drawingPad = drawingPad;
    }

    ngOnInit(): void {
        this.getURI();
    }

    getURI(): void {
        this.canvasUriService.getURISlowly().then(
            uri => this.uri = uri,
            err => console.log(err)
        );
    }
}

澄清一下，我正在尝试从 Mongo 加载以前保存的 Canvas (将包装在 DrawingPad 类中)。问题在于 DrawingPad 构造函数需要一个 canvas 元素，这意味着需要初始化 View，这就是为什么代码在 ngAfterViewInit() 中。问题是 ngAfterViewInit() 中的内容发生在 uri 变量设置之前。

有没有办法让我在 ngAfterViewInit() 中说，“等待...一旦设置了 uri 变量，然后初始化 DrawingPad 等...”

我提前为没有使用正确的术语道歉；我是一名数学家，Web 开发对我来说是全新的。

编辑:我刚刚读到有关await 的内容。这可能有帮助吗？

Answer 1

您基本上有两个异步函数，并且希望在它们可用时使用它们的结果。

您可以一个接一个地调用函数，使它们按顺序进行:

ngAfterViewInit() {
  this.canvasUriService.getURISlowly().then((uri) => {
    // Do stuff with uri
  });
}

然而，这消除了并行化。如果两者都相当慢，您可能希望让它们保持异步。或者，两个异步函数都存储它们的结果并调用第三个函数，该函数仅在两个结果都存在时才执行:

export class CanvasComponent implements AfterViewInit, OnInit {
  @ViewChild('masterCanvas') canvas: ElementRef;
  private uri: string;

  ngAfterViewInit() {
    this.draw();
  }

  ngOnInit(): void {
    this.canvasUriService.getURISlowly().then((uri) => {
      this.uri = uri;
      this.draw();
    });
  }

  private draw() {
    if (this.canvas && this.uri) {
      // Do stuff
    }
  }
}