javascript - AmplifyJS 状态错误 TypeError : Cannot read property 'state' of undefined

Question

我正在尝试使用 Angular cli 应用程序在 Amplify 中实现以下演练。 https://aws-amplify.github.io/docs/js/angular#using-authentication-components-without-the-authenticator

• 我的应用程序是按照上述演练构建的全新 Angular cli。

• 我的目标是使用上述链接中提到的独立身份验证组件。

• 我的问题是尝试添加 <amplify-auth-sign-up></amplify-auth-sign-up> 时

错误信息是:

我的组件指定了 state 所需的设置如上面的链接演练所示。

auth.component.ts

import { Component, OnInit } from '@angular/core';
import { AmplifyService } from 'aws-amplify-angular';

@Component({
  selector: 'app-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.css']
})
export class AuthComponent implements OnInit {

  constructor(private amplifyService: AmplifyService) {
    this.amplifyService.setAuthState({
      state: 'signUp',
      user: null
    });
  }
}

auth.component.html

<amplify-auth-sign-up></amplify-auth-sign-up>

非常感谢任何帮助。如有任何问题/额外信息，请告诉我。

Answer 1

我能够让它与下面的代码一起工作。关键是放大各个组件需要设置一个状态——我可以使用“authState”来完成此操作，如下所示。区别似乎在于除了 typescript 之外还在 html 中明确指定状态。

设置 authState(用户:null，状态:'signUp'，如下所示)应该足以消除错误并显示注册表单。

在此处的代码中，我还添加了更多项目来演示有关如何使用 authState 的更多信息。

在下面，页面将加载注册表单。

用户输入详细信息并点击“注册”后，页面将显示“确认注册”表单，用户可以在其中输入 Cognito 发送给他/她的验证码(取决于您的 Cognito 设置) :

html:

    <amplify-auth-sign-up [authState]="authState" *ngIf="showSignUp"></amplify-auth-sign-up>
    <amplify-auth-confirm-sign-up [authState]="authState" *ngIf="showVerify"></amplify-auth-confirm-sign-up> 

ts:

    import { AmplifyService } from 'aws-amplify-angular';
    import { AuthState } from 'aws-amplify-angular/dist/src/providers';

    Export class AuthComponent implements OnInit {

    public authState: AuthState
    public newUser: any
    public state: any
    public showSignUp = true
    public showVerify = false

    constructor(public amplifyService: AmplifyService) {
         this.authState ={ //setting this should be enough to show the sign-up form and remove the error
           user: null,
           state: 'signUp' 
         }

         this.amplifyService.setAuthState(this.authState)  //this might not be required

         this.amplifyService.authStateChange$ //listening for state changes. For example, if you want to take action after the user has submitted the sign up form
                .subscribe(authState => {   
                    this.state = authState.state
                    this.newUser = authState.user
                    if (this.newUser){ //just an example of getting data from the stateChange. Not required.
                      this.username = this.newUser.username
                    }

                    if (this.state === 'confirmSignUp'){//get change in state
                       this.authState ={
                          user: authState.user,
                         state: 'confirmSignUp'
                       }
                       this.showSignUp = false
                       this.showVerify = true
                    }
                }
     }
 }

我为自动登录 here 等内容添加了更多详细信息.

另请注意，我发现 Amplify 组件可以向用户显示我不希望用户看到的错误消息 - 随机的技术内容。可能有一种方法可以对其进行自定义(一些讨论 here )，但请务必测试许多不同的场景以了解可能会出现什么错误消息。