在Aurelia中，是否可能在继续执行之前等待自定义元素中的承诺完成？

如果您有一个Aurelia应用程序，其中导航栏中有一个“语言切换器”自定义元素。假设这些语言是从数据库调用中提取的，并通过承诺返回

我现在实现它的方法是在自定义元素中的bind（）函数中调用fetch，它返回一个承诺，但我的问题是。。。如果这个数据库请求需要几秒钟才能完成该怎么办？理想情况下，在这个承诺返回之前，我不希望应用程序的其余部分运行，因为许多其他元素依赖于来自language switcher自定义元素的语言id

---

我需要的是能够保证，一旦应用程序到达我的导航栏中的自定义元素“language switcher”，它需要阻止/暂停/等待数据库获取调用返回并解析它的承诺，然后再继续处理应用程序。

您可以使用路由视图模型的

activate（）

钩子。例如：

screen-1.js

export class Screen1 {

   activate() {
     //database call
     return myPromise
       .then(result => this.result = result);
   }
}

screen-1.html

<template>
   <require from="./language-switcher"></require>

   <language-switcher some-property.bind="result"></language-switcher>
</template>

---

有关详细信息，请阅读您可以使用路线视图模型的

激活（）。例如：

screen-1.js

export class Screen1 {

   activate() {
     //database call
     return myPromise
       .then(result => this.result = result);
   }
}

screen-1.html

<template>
   <require from="./language-switcher"></require>

   <language-switcher some-property.bind="result"></language-switcher>
</template>



有关更多信息，请阅读
此讨论可能也会对该问题有所帮助

OP说：“理想情况下，我希望能够为created（）回调实现一个钩子，返回一个承诺，并让Aurelia在调用附加的（）回调之前等待它解决…”

EisenbergEffect回答说：“我们不能在所有组件中都提供这种功能。这将对性能造成灾难，并且不再以任何方式映射到web组件。”

提到了一个解决办法：

import { HttpClient } from 'aurelia-fetch-client';
import { CompositionTransaction } from 'aurelia-framework';

export class YearToDateGauge {
  static inject = [HttpClient, CompositionTransaction];
  constructor(http, compositionTransaction) {
  this.http = http;
  // https://github.com/aurelia/framework/issues/367
  this.compositionTransactionNotifier = compositionTransaction.enlist();
}

created() {
  // retrieve the data
  this.http.fetch('/books/')
      .then(data => {
          this.books = data; // store locally
          // done loading data, allow the attached() hook to fire
          this.compositionTransactionNotifier.done();
      return data;
  });
}

// fires only after `compositionTransactionNotifier.done()` is called
attached() {
// update the DOM here, e.g. draw a chart, etc
this.numBooks = this.books.length; // the user is guaranteed that    
  this.books will be availaible
}
}

这次讨论可能也会对这个问题有所启发

OP说：“理想情况下，我希望能够为created（）回调实现一个钩子，返回一个承诺，并让Aurelia在调用附加的（）回调之前等待它解决…”

EisenbergEffect回答说：“我们不能在所有组件中都提供这种功能。这将对性能造成灾难，并且不再以任何方式映射到web组件。”

提到了一个解决办法：

import { HttpClient } from 'aurelia-fetch-client';
import { CompositionTransaction } from 'aurelia-framework';

export class YearToDateGauge {
  static inject = [HttpClient, CompositionTransaction];
  constructor(http, compositionTransaction) {
  this.http = http;
  // https://github.com/aurelia/framework/issues/367
  this.compositionTransactionNotifier = compositionTransaction.enlist();
}

created() {
  // retrieve the data
  this.http.fetch('/books/')
      .then(data => {
          this.books = data; // store locally
          // done loading data, allow the attached() hook to fire
          this.compositionTransactionNotifier.done();
      return data;
  });
}

// fires only after `compositionTransactionNotifier.done()` is called
attached() {
// update the DOM here, e.g. draw a chart, etc
this.numBooks = this.books.length; // the user is guaranteed that    
  this.books will be availaible
}
}

您可以在路线视图模型的
activate
方法中返回承诺。这样，应用程序将等待承诺。路由器的视图可以等待承诺被呈现，但不是自定义元素。我不确定我是否理解。多个其他自定义元素依赖于此语言切换器自定义元素，使其下拉列表填充语言并绑定。因此，我需要某种方法暂停应用程序的进一步执行，直到该承诺返回并得到解决。您正在寻找的是
activate（）
lifecycle挂钩。请注意，您不能在自定义元素中使用它，只能在路由器附加的视图中使用它。如何将语言Id绑定到其他组件？是否可以优雅地处理空值？例如，在视图中，对要避免渲染的元素抛出if.bind=“languageId”。在视图模型中，无论您订阅了id还是属性更改事件，仅当存在值时才进行处理。您可以在路由视图模型的
activate
方法中返回承诺。这样，应用程序将等待承诺。路由器的视图可以等待承诺被呈现，但不是自定义元素。我不确定我是否理解。多个其他自定义元素依赖于此语言切换器自定义元素，使其下拉列表填充语言并绑定。因此，我需要某种方法暂停应用程序的进一步执行，直到该承诺返回并得到解决。您正在寻找的是
activate（）
lifecycle挂钩。请注意，您不能在自定义元素中使用它，只能在路由器附加的视图中使用它。如何将语言Id绑定到其他组件？是否可以优雅地处理空值？例如，在视图中，对要避免渲染的元素抛出if.bind=“languageId”。在视图模型中，无论您是订阅了id还是属性更改事件，只有在存在值时才进行处理感谢您的帮助。这正是我所希望的——就像一个符咒一样有效！：-）非常感谢你的帮助。这正是我所希望的——就像一个符咒一样有效！：-）