Meteor.loginWithPassword（）

Question

我需要帮助。 我的代码在登录中。 当用户点击login时：我按下一个按钮以避免用户在系统工作时多次点击，等待答案

我的代码工作正常，但是当用户点击按钮登录时我放了一个加载器类。

当用户输入密码并被验证时，系统会将我们发送到下一个视图。这很好，但...... 问题是： 当用户输入无效的密码this.loadingActive = true;时，不要更改..按钮保持旋转激活永久。我的意思是变量loadingActive不会变为true

我的HTML

<button class="btn btn-default btn-lg btn-block"
        ng-class="{'disabled': login.loadingActive === false}"
        ng-disabled="loginForm.$invalid || login.loadingActive === false"
        ng-click="login.login()">
    <span ng-hide="login.loadingActive" class="fa fa-refresh animacion-cargando"></span>
    <span ng-hide="login.loadingActive">loading...</span>
    <span ng-show="login.loadingActive">Login</span>
</button>

这是我的js文件

login() {
    this.loadingActive = false;
    this.error = '';
    Meteor.loginWithPassword(this.credentials.email.toLowerCase(), this.credentials.password,
        this.$bindToContext((err) => {
            Meteor.setTimeout(() => {
                if (err) {
                    this.loadingActive = true;
                    this.error = err;
                } else {
                    this.loadingActive = true;
                    this.$state.go('app.pageOne');
                }
            }, 1000);
        })
    );
}

为什么当我在Meteor.loginWithPassword中放置Meteor.setTimeout时会发生这种情况？ 任何想法？

谢谢！

Answer 1

我看到你将回调包裹在this.$bindToContext内。不知道它做了什么但我的猜测是它改变了回调函数的上下文（this），因此this.loadingActive = true没有效果。

要解决此问题，您可以使用参考变量：

login() {
  const self = this;
  // ...
  Meteor.loginWithPassword(
    self.credentials.email.toLowerCase(),
    self.credentials.password,
    self.$bindToContext((err) => {
      Meteor.setTimeout(() => {
        // ...
        self.loadingActive = true;
      }, 1000);
    }
  ));
}