TypeScript - איך להריץ קוד אחרי שה-view מאותחל וה-Promise מחזיר נתונים מה-database ב-Angular 2

אני חושב שהקוד ידבר בעד עצמו.

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

לצורך הבהרה, אני מנסה לטעון קנבס שנשמר קודם (יוכרז בתוך מחלקת DrawingPad) מ-Mongo. הבעיה היא שמבנה DrawingPad דורש אלמנט canvas, מה שאומר שה-View צריך היה להיות מאותחל, ולכן החלק הזה של הקוד נמצא בתוך ngAfterViewInit(). הבעיה היא שהדברים בתוך ngAfterViewInit() קורים לפני שמשתנה uri מוגדר.

האם יש דרך לומר ב-ngAfterViewInit(), "חכו... ברגע שמשתנה ה-uri מוגדר, אתחיל את ה-DrawingPad וכו'..."

אני מתנצל מראש על כך שאינני משתמש במונחים הנכונים; אני מתמטיקאי, ופיתוח אינטרנט הוא חדש לחלוטין עבורי.

עריכה: פשוט קראתי על await. האם זה משהו שעשוי לעזור?

תשובה #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
    }
  }
}