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

Question

我试图实现下面的演练在放大器与角cli应用程序。https://aws-amplify.github.io/docs/js/angular#using-authentication-components-without-the-authenticator

• 我的应用程序是一个新的角cli构建遵循上述演练。
• 我的目标是使用上述链接中提到的独立的auth组件。
• 我的问题是当尝试添加<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 (带有user: null，state：'signUp‘，如下所示)应该足以删除错误并显示注册表单。

在这里的代码中，我还添加了更多的项目，以演示如何使用authState。

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

一旦用户输入他们的详细信息并单击“注册”，页面将显示“确认注册”表单，这是用户输入科尼托发送给他/她的验证代码的地方(取决于您的认知设置)：

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
                    }
                }
     }
 }

我增加了一些更多的细节，比如这里中的自动标志。

还要注意的是，我已经发现放大器组件可以向用户显示错误信息，这是我不希望用户看到的--随机的，技术性的东西。可能有一种方法可以对其进行自定义(一些讨论这里)，但一定要测试许多不同的场景，以了解可能出现哪些错误消息。