打字稿同步方法调用答案

【问题标题】：Typescript Synchronize method calling打字稿同步方法调用
【发布时间】：2018-05-25 19:32:30
【问题描述】：

你好 Nativescript 团队，

我被方法调用搞砸了。

请指导我如何在 Nativescript + Angular 中实现同步方法调用

import { Component, OnInit, AfterContentInit } from "@angular/core";

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html",
    styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit, AfterContentInit {

constructor() {
    this.firstMethod();
    this.secondMethod();
    this.thirdMethod();
    this.fourthMethod();
}

ngOnInit(): void {
    this.firstInitMethod();
    this.secondInitMethod();
    this.thirdInitMethod();
    this.fourtInitMethod();
}

private firstInitMethod() {
    console.log("1 ::::: firstInitMethod method");
}

private secondInitMethod() {
    console.log("2 ::::: secondInitMethod method");
}

private thirdInitMethod() {
    console.log("3 ::::: thirdInitMethod method");
}

private fourtInitMethod() {
    console.log("4 ::::: fourtInithMethod method");
}


private firstMethod() {
    console.log("1 ::::: First method");
}

private secondMethod() {
    console.log("2 ::::: second method");
}

private thirdMethod() {
    console.log("3 ::::: third method");
}

private fourthMethod() {
    console.log("4 ::::: fourth method");
}


ngAfterContentInit() {
    console.log("ngaftercontnet init method called");
    this.firstAfterInitMethod();
    this.secondAfterInitMethod();
    this.thirdAfterInitMethod();
    this.fourthAfterInitMethod();
}


private firstAfterInitMethod() {
    console.log("1 ::::: firstAfterInitMethod method");
}

private secondAfterInitMethod() {
    console.log("2 ::::: secondAfterInitMethod method");
}

private thirdAfterInitMethod() {
    console.log("3 ::::: thirdAfterInitMethod method");
}

private fourthAfterInitMethod() {
    console.log("4 ::::: fourthAfterInitMethod method");
}

输出结果：

[My Phone 5508]: 1 ::::: First method
[My Phone 5508]: 2 ::::: secondInitMethod method
[My Phone 5508]: 3 ::::: thirdInitMethod method
[My Phone 5508]: 3 ::::: third method
[My Phone 5508]: 2 ::::: second method
[My Phone 5508]: 4 ::::: fourtInithMethod method
[My Phone 5508]: 4 ::::: fourth method
[My Phone 5508]: ngaftercontnet init method called
[My Phone 5508]: 1 ::::: firstAfterInitMethod method
[My Phone 5508]: 2 ::::: secondAfterInitMethod method
[My Phone 5508]: 1 ::::: firstInitMethod method
[My Phone 5508]: 3 ::::: thirdAfterInitMethod method
[My Phone 5508]: 4 ::::: fourthAfterInitMethod method

我需要输出方法同步调用：

First methods in Contructor()

        this.firstMethod();
        this.secondMethod();
        this.thirdMethod();
        this.fourthMethod();
Second methods in Init

        this.firstInitMethod();
        this.secondInitMethod();
        this.thirdInitMethod();
        this.fourtInitMethod();
Third methods in AfterInit

        this.firstAfterInitMethod();
        this.secondAfterInitMethod();
        this.thirdAfterInitMethod();
        this.fourthAfterInitMethod();

【问题讨论】：

我不确定你的问题是什么，你能改写一下吗？否则，我建议您查看Angular lifecycle 以了解其工作原理
我更新了问题
好吧，您在 OnInit 和构造函数中调用这些方法，所以这是意料之中的。如果您希望全部按顺序运行，请在 OnInit 中添加所有内容。然后这些将按顺序运行，如果它们实际上不是异步的。
@AT82 是吗？他的 firstInitMethod 是 ngOnInit 中最后一个运行的方法，所以，ngOnInit 里面应该有 sincronization？

标签： javascript angularjs angular typescript

【解决方案1】：

您必须返回 Promise 或 Observable 以等待方法完成其进程。

如：

private firstAfterInitMethod() {
  return new Promise((resolve, reject) => {
    console.log("1 ::::: firstAfterInitMethod method");
    // resolve("something"); when you want to return something.
  });
}

在您的情况下，其他方法必须返回 Promise，例如 firstAfterInitMethod()。

你必须像这样调用firstAfterInitMethod：

this.firstAfterInitMethod().then((resolve:any) => {
  // now you can call secondAfterInitMethod();
});

注意：TypeScript 和 JavaScript 是异步的。因此，当你需要做一些同步工作时，你必须使用Promise。

【讨论】：