Question

我的Ionic应用程序中的按钮出现了问题。我的按钮有一个单击事件“loginEvent（）”，它为用户执行登录。我有两个span标签，应该在执行登录时显示加载符号。

问题是在loginEvent（）返回之前，按钮不会使用加载符号进行更新。在loginEvent（）返回之前，按钮上的单击动画也不会运行。

单击按钮时，在按钮更新到微调器之前，都会打印“login”和“/ login”，从而给人一种GUI冻结的印象。所期望的行为是登录按钮在执行登录调用时获取微调器。

知道为什么我的按钮表现得像这样吗？

登录按钮

<button ion-button block (click)="loginEvent();">
    <span *ngIf="!isLoading">Logga in</span>
    <span *ngIf="isLoading"><ion-spinner></ion-spinner></span>    
</button>

为LoginEvent（）

loginEvent() {
    console.log("login");
    this.isLoading = true;
    this.userHandler.login(this.username, this.password, this); //Performa authentication to Amazon Cognito and returns the result via callback function
    console.log("/login");
}

修改

为我的UserHandler和AuthenticationService添加代码。

UserHandler.ts

@Injectable()
export class UserHandler {

    constructor(public authenticationService: AuthenticationService) {
        this.observers = new Array<Observer>();
    }


    public login(username: string, password: string, callback: any) {
        this.authenticationService.performLogin(username, password, callback);
    }
}

AuthenticationService.ts

public performLogin(username: string, password: string, callback: CognitoCallback) {

    username = username .toLowerCase();

    var authenticationData = {
        Username: username,
        Password: password,
    };
    var authenticationDetails = new AWSCognito.AuthenticationDetails(authenticationData);

    var userData = {
        Username: username,
        Pool: this.getUserPool()
    };

    let cognitoUser = new AWSCognito.CognitoUser(userData);
    cognitoUser.authenticateUser(authenticationDetails, {

        onSuccess: function (result: any) {
            var loginKey = 'cognito-idp.' + environment.region + '.amazonaws.com/' + environment.userPoolId;

            var loginProvider = {};
            loginProvider[loginKey] = result.getIdToken().getJwtToken();


            var credentials = new AWS.CognitoIdentityCredentials({
                IdentityPoolId: environment.identityPoolId,
                Logins: loginProvider
            });

            credentials.refresh((error: any) => {
                if (error) {
                    console.error(error);
                }
            });

            credentials.get(function (err: any) {
                if (!err) {
                    callback.cognitoCallback(null, result, "FAILED");
                } else {
                    callback.cognitoCallback(err.message, null, "SUCCESS");
                }
            });
        },

        onFailure: function (err: any) {
            callback.cognitoCallback(err.message, null, "FAILURE");
        },
        newPasswordRequired: function (userAttributes: any, requiredAttributes: any) {
            callback.cognitoCallback("Please set a new password", null, "newPasswordRequired");
        }
    });
}

Answer 1

我猜'userHandler.login'用于调用API进行用户身份验证。由于HTTP请求是异步的，因此它会在您调用它们时立即返回promise。

您可以使用离子loading component代替微调器，您可以在其中显示加载器，直到API返回响应。请分享您的userHandler代码。

离子GUI冻结点击事件

1 个答案: