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加载以前保存的画布（将包含在DrawingPad类中）。问题是DrawingPad构造函数需要canvas元素，这意味着View需要初始化，这就是为什么代码部分在ngAfterViewInit()内。问题是ngAfterViewInit()中的内容发生在uri变量设置之前。

有没有办法让我在ngAfterViewInit()，＆＃34;等等...设置uri变量，然后初始化DrawingPad等等。 ..＆＃34;

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

编辑：我刚看过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
    }
  }
}

如何在视图初始化后运行代码，并且Promise在Angular 2中从db返回数据

1 个答案: