如何在 Angular/Typescript 中逐行执行代码？答案

【问题标题】：How do I execute one line of code after anohter in Angular/Typescript?如何在 Angular/Typescript 中逐行执行代码？
【发布时间】：2019-11-30 18:09:44
【问题描述】：

我是 Angular 的新手。在这里，我试图在打字稿中按顺序运行以下代码行。我该怎么做？

item:any;
ngOninit() {
   this.paramID = this.http.get(url). // Step 1
                  subscribe(data => {
                  console.log(data); // Step 2
                  this.item = data;
                  return data;
                  });

  console.log(this.item); // Step 3, wait till this.item is initialized
  // Another Async request's response // Step 4
  // Some last line of code // Step 5
}

所以，最后它应该等待任何后续步骤，在当前步骤完成之前。

预期顺序是： Step 1 -> Step 2 -> Step 3 -> Step 4 -> Step 5 依次进行

【问题讨论】：

当然这很重要，到目前为止，这些都是同步的，如果你在其中做任何类似 http 的事情，它将是异步的
这三行代码会依次执行。你没有什么可做的。这段代码完全没有异步。
为了清楚起见，我相信@Borg1903 的意思是他们希望它在链中执行。他们不希望第二行在第一行完成之前运行，并在第二行完成后运行第三行。
现在有异步了。只需将第 3、4、5 行移到传递给订阅的回调中，就在this.item = data; 行之后。请注意，return data 没有任何用途。并且 subscribe() 不返回参数 ID。另请注意，由于第 4 步和第 5 步只是 cmets，它们不会被执行。如果您对具体行代码有疑问，请发布这些代码行，而不是 cmets。
This article may be of help.。很难说出如何帮助您解决问题，因为您没有提供问题的具体编码示例。该解决方案将特定于您在这些占位符中所做的任何事情。

标签： angular typescript asynchronous

【解决方案1】：

在 ngOnInit 运行时，您的快照可能尚未加载。我建议订阅激活的路由参数，然后在更新后运行任何其他代码：

ngOnInit(): void {
   this.subscribeToRouteParams()
}

ngOnDestroy(): void {
   this.querySub.unsubscribe()
}

private subscribeToRouteParams(): void {
   this.querySub = this.activatedRoute.queryParams.subscribe(params => this.updateId(data));
}

private updateId(data: params): void {
    this.paramId = data.id
    this.anyOtherFunctionalityDependentOnTheId()
}

编辑：我假设 paramId 在您发布的代码中未定义。如果不是这种情况，那么您无需执行任何操作，因为该代码将按顺序运行

【讨论】：

【解决方案2】：

您可以使用 forkjoin，但不确定您想要它的方式，但它是一种选择。

https://medium.com/@swarnakishore/performing-multiple-http-requests-in-angular-4-5-with-forkjoin-74f3ac166d61

【讨论】：

或者你可以在另一个函数中调用一个函数