Angular 7应用为什么不再对classList.add做出反应?

时间:2019-04-09 08:26:18

标签: javascript angular typescript

我的角度应用程序中有一个Alert服务,每当出现错误时,它都会做出反应(很好,直到现在为止都做出了反应)。它工作得很好,但是从今天起,在角度方面就没有反应了。

  • 现在,我在此网站上搜索了一些解决方案,但没有一个解决我的问题。
  • 我尝试使用ElementRef代替我想使用的警报来代替普通的JavaScript方法。那也不起作用。
  • 我试图从模板中删除所有i18n属性。没用。
  • 我使用控制台日志调试了警报服务,并且可以正常工作-添加了类,更改了innerText,但是视觉上没有发生任何事情。

我不知道发生了什么。它只是停止工作。

这是我模板中的代码:

<form 
  (ngSubmit)="onLogin(regForm)" 
  #regForm="ngForm" 
  class="register__form flex flex-col flex-middle"
  *ngIf="!reset">
    <mat-form-field>
      <input type="email" matInput placeholder="Email" i18n-placeholder required ngModel name="email"
        pattern="^[a-zA-Z0-9]*[@][a-zA-Z0-9]*[.][A-Za-z]{2,7}$"
        autocomplete="email">
    </mat-form-field>
    <mat-form-field>
      <input type="password" matInput placeholder="Password" i18n-placeholder required ngModel name="password"
      autocomplete="current-password">
    </mat-form-field>

    <button type="submit" class="btn btn--action" i18n >Sign In</button>
  </form>

与ts组件相关的代码:

 onLogin(form: NgForm) {
    const email = form.value.email;
    const password = form.value.password;
    this.authService.auth.signInWithEmailAndPassword(email, password)
      .then(() => null)
      .catch(error => {
        console.log(error)
        if (error.code.includes('user-not-found')) {
          this.alerts.showAlert('User not found', 'Sign In');
        } else if (error.code.includes('wrong-password')) {
          this.alerts.showAlert('Invalid password', 'Sign In');
        }
      });
  }

以及警报服务中的相关代码:

 showAlert(message: string, final: string) {
    const bookButton = document.querySelector('.btn--action');
    bookButton.textContent = message;
    bookButton.classList.add('btn--warning');
    setTimeout(() => {
      bookButton.textContent = final;
      bookButton.classList.remove('btn--warning');
    }, 3000);
  }

0 个答案:

没有答案