离子GUI通过点击事件冻结

Question

我的离子应用程序中的按钮有SOM问题。我的按钮具有单击事件" loginevent(("，可为用户执行登录名。我有两个跨度标签，应该在执行登录时显示加载符号。

问题在于，直到loginevent((返回之前，该按钮不会使用加载符号更新。在loginevent((返回时，按钮上的单击动画也不运行。

单击按钮时，"登录"one_answers"/登录"是在按钮更新到旋转器之前打印的，给人的印象是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");
}

编辑

为我的用户和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请求是异步的，因此您立即致电您返回承诺。

而不是旋转器，您可以使用离子加载组件，可以在其中显示加载程序，直到API返回响应为止。请分享您的userHandler代码。