0

私は Angular2 @angular/core 2.2.1 を unsing しており、資格情報が悪いたびに、「悪い資格情報」アニメーションを複数回トリガーしたいと考えています。

ここに私の考えがあります：

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
  animations: [
    trigger('wrongCredentials', [
      transition('* => *', [
        animate(300, keyframes([
          style({opacity: 0, transform: 'translateX(-100%)', offset: 0}),
          style({opacity: 1, transform: 'translateX(15px)',  offset: 0.3}),
          style({opacity: 1, transform: 'translateX(0)',     offset: 1.0})
        ]))
      ])
    ])
  ],
})
export class LoginComponent {

    wrongCredentials = "shown";

    doLogin() {

        let contentHeaders = new Headers();
        contentHeaders.append('Accept', 'application/json');
        contentHeaders.append('Content-Type', 'application/json');

        let data = {
          username: this.username,
          password: this.password
        };

        this.http.post(BackendUrl + '/auth', JSON.stringify(data), {headers: contentHeaders})
          .map(res => res.json())
          .subscribe(
            data => {

              localStorage.setItem('id_token', data.token);
              this.router.navigate(['dashboard']);

            },
            err => {
              console.log(err);
              this.wrongCredentials = "" + new Date().getTime();
              console.log(this.wrongCredentials);
            },
            () => console.log('Authentication Complete')
          );

      }

}

そして、html

<div class="auth">

  <div class="auth-container">
    <div class="card" [@wrongCredentials]="wrongCredentials">
      <div class="auth-header">
        <h1 class="auth-title">{{title}}</h1>
      </div>
      <div class="auth-content">
        <p class="text-xs-center">LOGIN TO CONTINUE</p>
        <form (ngSubmit)="doLogin()" novalidate="">
          <div class="form-group">
            <label>Username</label>
            <input [(ngModel)]="username" name="username" class="form-control underlined"  placeholder="Your username" required>
          </div>
          <div class="form-group">
            <label>Password</label>
            <input [(ngModel)]="password" name="password" type="password" class="form-control underlined" placeholder="Your password" required>
          </div>
          <div class="form-group">
            <label>
              <input class="checkbox" type="checkbox">
              <span>Remember me</span>
            </label>
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-block btn-primary">Login</button>
          </div>
        </form>
      </div>
    </div>
  </div>

</div>

問題は、アニメーションを複数回トリガーする方法です。wrongCredentialsしたがって、アニメーションをトリガーするには、別のランダムな文字列に変更する必要がありますか?

関数呼び出しを介して直接アニメーションをトリガーする方法はありますか?

4

1 に答える 1