从 Promise.catch() 更新 Angular 组件字段不会更新 UI

Question

我对 Angular 还很陌生，所以也许我在这里遗漏了一些重要的东西，但我使用的代码可以在很多存储库中找到，我在问自己我在这里做错了什么。

所以我有这个登录组件，我想在其中使用 Firebase OAuth 进行登录。OAuth 部分工作正常。我可以使用 Facebook、Google 或电子邮件登录。当已经有用户使用这个或那个电子邮件时，问题就会出现在游戏中。这是我的 Facebook 登录代码：

onLoginFacebook() {
  this.afAuth.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider())
    .catch(error => {
      this.error = error.message;
    });
}

当已有用户使用给定电子邮件时，尝试登录将导致消息出错​​p>

"An account already exists with the same email address but different sign-in credentials. Sign in using a provider associated with this email address."

如您所见，我只是将此错误消息分配给我的组件的一个变量，该变量声明为：

public error: string;

在我的组件模板中，我想使用 span 来显示错误消息（现在，这对我来说已经足够了，因为我刚刚开始并计划在以后实施适当的错误处理）：

<span class="error" *ngIf="error" >{{ error }}</span>

问题出在这里：在我的组件中设置错误消息后，没有任何反应。但是，如果我点击任何按钮或输入，消息就会突然出现。

我认为一旦我设置了变量并且我在 catch() 函数之外设置了变量，Angular 就会自动更新 UI，例如。 G。通过 setTimeout(()=> this.error = "test", 2000)，它按我的预期工作。那么我错过了什么或做错了什么？ :(

Answer 1

这是 Angular 中的一个错误。 Angular 使用zones 来实现变更检测。区域基本上跟踪异步上下文。

Angular 做这个 polyfill 的方式是修补平台拥有的每个异步 API。例如here is the code for Promise。

如果我们仔细查看代码，我们可以知道如果设置了 window.Promise - .then 被覆盖但 .catch 没有被覆盖。您的代码可能在某处分配了Promise，并且应该处理的代码如下所示：

if (NativePromise) {
  patchThen(NativePromise);

  // ...

虽然ZoneAwarePromise 确实定义了.catch，但我们可以看到patchThen 仅修补.then，并且不会覆盖.catch。我已经为 zone.js 打开了an issue。