AmplifyJS状态错误TypeError：无法读取未定义的属性“状态”

Question

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

• 我的应用是继上述演练之后的全新角度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”进行的，如下所示。除了打字稿外，区别似乎是在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），但是一定要测试很多不同的情况以了解可能会出现什么错误消息。