Angular Auth.signUp的then回调内changeValue需二次点击才执行

• 核心根因：你调用的Auth.signUp（AWS Amplify 鉴权方法）的异步Promise回调默认运行在Angular NgZone 上下文之外。第一次点击注册按钮时，then回调里的changeValue(false)实际上已经执行，但由于逻辑脱离了Angular变更检测周期，方法修改的组件状态不会同步刷新到视图，你无法感知到执行结果；第二次点击按钮时，click事件会主动触发Angular全局变更检测，第一次修改的状态此时才被渲染到页面，最终造成「必须点击两次才触发changeValue」的错觉。
• 代码冗余问题：你在then的回调函数前额外加了async标记，但回调内部没有任何await异步逻辑，多余的async包装会额外生成一层无用Promise，虽然不是核心故障点，但属于不规范写法。

你可以在changeValue方法第一行加一句console.log('changeValue触发')测试，第一次点击时控制台就会打印日志，直接验证方法本身已经执行，只是视图未更新。

优先推荐第一种标准方案，符合Angular的设计规范：

方案1：通过NgZone把异步逻辑拉回Angular上下文 #

1. 首先在组件中导入并注入NgZone：

import { Component, NgZone } from '@angular/core';
// 其他业务导入省略

@Component({
  // 组件元数据保持原样
})
export class RegisterComponent {
  // 原有组件属性（email、password等）保持不变
  constructor(private ngZone: NgZone) {}
}

2. 修改onRegister方法的then回调，把需要更新视图的逻辑包裹在ngZone.run()中，同时去掉多余的async标记：

onRegister(): void {
  const user = {
    username: this.email,
    password: this.password,
    attributes: {
      email: this.email,
    }
  }
    
  Auth.signUp(user).then((data: any) => {
    this.ngZone.run(() => {
      this.changeValue(false)
    })
  }).catch(err => {
    alert(err.message || JSON.stringify(err))
  });
}

方案2：手动触发变更检测（临时修复用） #

如果不想注入NgZone，也可以通过手动触发变更检测的方式修复，适合快速验证场景：

1. 导入并注入ChangeDetectorRef：

import { Component, ChangeDetectorRef } from '@angular/core';

// 组件类中注入
constructor(private cdr: ChangeDetectorRef) {}

2. 在调用changeValue后手动标记组件需要变更检测：

Auth.signUp(user).then((data: any) => {
  this.changeValue(false)
  this.cdr.markForCheck()
}).catch(err => {
  alert(err.message || JSON.stringify(err))
})

内容的提问来源于stack exchange，提问作者Riuck