服務功能被調用兩次

Question

我有認證組件

@Component({ 
    selector: "oe-authentication-view", 
    templateUrl: "./authentication-view.component.html" 
}) 
export class AuthenticationViewComponent implements OnInit { 

    authorizationFormGroup: FormGroup; 
    login: FormControl; 
    password: FormControl; 

    error: ErrorMessage; 

    constructor(@Inject('IUserService') private _userService: IUserService, 
       private _router: Router) { 
     this.error = new ErrorMessage(Messages.CHECK_DATA_AND_TRY_AGAIN); 
    } 

    ngOnInit(): void { 
     if (this._userService.userSession.isAuthenticated) { 
      this._router.navigate([URI.COMPARISONS_RESOURCE]); 
     } 
     this.initForm(); 
    } 

    private initForm() { 
     this.login = new FormControl('', [ 
      Validators.required, 
     ]); 
     this.password = new FormControl('', [ 
      Validators.required, 
      Validators.minLength(8) 
     ]); 
     this.authorizationFormGroup = new FormGroup({ 
      login: this.login, 
      password: this.password 
     }); 
    } 

    onSubmit(): void { 
     this._userService.authenticate(this.login.value, this.password.value).then((isAuthenticated: boolean) => { 
      if (isAuthenticated) { 
       let user: User = new User(this.login.value, this.password.value); 
       this._userService.userSession = new UserSession(user, isAuthenticated); 
       this._userService.fetchRole().then((role: Role) => { 
        this._userService.userSession.user.role = role; 
        this._router.navigate([URI.COMPARISONS_RESOURCE]); 
       }); 
      } else { 
       this.error.isError = true; 
      } 
     }); 
    } 
} 

，模板

<div class="container"> 
    <form class="form-sign" [formGroup]="authorizationFormGroup" novalidate (submit)="onSubmit()"> 
     <div class="greetings"> 
     </div> 
     <div class="alert alert-danger" role="alert" *ngIf="error.isError">{{error.errorMessage}}</div> 
     <input class="form-control" [ngClass]="{'form-control-danger': login.errors && login.touched}" 
       placeholder="Login" type="text" formControlName="login" autofocus/> 
     <input class="form-control" [ngClass]="{'form-control-danger': password.errors && password.touched}" 
       placeholder="Password" formControlName="password" type="password"/> 
     <button class="btn btn-lg btn-primary btn-block" type="submit" [disabled]="authorizationFormGroup.errors" 
       (click)="onSubmit()">Sign in 
     </button> 
     <div class="forgot-password"> 
      <a href="#">Forgot password?</a> 
     </div> 
    </form> 
</div> 

和認證服務

@Injectable() 
export class UserService implements IUserService { 
    userSession: UserSession; 

    constructor(private _http: Http) { 
     this.userSession = new UserSession(); 
    } 

    authenticate(username: string, password: string): Promise<Boolean> { 
     let params: URLSearchParams = Endpoint.getPredefinedURLSearchParams(); 
     params.set("username", username); 
     params.set("password", password); 
     let url = Endpoint.BASE_URL 
      + Endpoint.DELIMITER 
      + Endpoint.AUTH_RESOURCE; 
     return this._http.get(url, {search: params}).toPromise().then((res: Response) => res.json()); 
    } 

    fetchRole(): Promise<Role> { 
     let params: URLSearchParams = Endpoint.getPredefinedURLSearchParams(); 
     let url = Endpoint.BASE_URL 
      + Endpoint.DELIMITER 
      + Endpoint.USERS_RESOURCE 
      + Endpoint.DELIMITER 
      + this.userSession.user.login 
      + Endpoint.DELIMITER 
      + Endpoint.ROLE_RESOURCE; 
     return this._http.get(url, {search: params}).toPromise().then((res: Response) => res.json()); 
    } 
} 

，並結合一切融合在一起

@NgModule({ 
    imports: [ 
     BrowserModule, 
     HttpModule, 
     FormsModule, 
     ReactiveFormsModule 
    ], 
    declarations: [ 
     AuthenticationViewComponent 
    ], 
    providers: [ 
     {provide: 'IUserService', useClass: UserService}, 
    ], 
    bootstrap: [OutletComponent] 

}) export class Module { } 

模塊

然後點擊提交按鈕onSubmit（）函數被調用。 由於某些原因，服務函數authenticate（）和fetchRole（）被調用兩次。 發生了什麼以及如何防止這種情況發生？

Answer 1

您在兩個事件上設置函數onSubmit（）：Button（click）和form（submit）。它會這樣調用兩次。

<div class="container"> 
    <form class="form-sign" [formGroup]="authorizationFormGroup" novalidate (submit)="onSubmit()"> 
     <div class="greetings"> 
     </div> 
     <div class="alert alert-danger" role="alert" *ngIf="error.isError">{{error.errorMessage}}</div> 
     <input class="form-control" [ngClass]="{'form-control-danger': login.errors && login.touched}" 
       placeholder="Login" type="text" formControlName="login" autofocus/> 
     <input class="form-control" [ngClass]="{'form-control-danger': password.errors && password.touched}" 
       placeholder="Password" formControlName="password" type="password"/> 
     <button class="btn btn-lg btn-primary btn-block" type="submit" [disabled]="authorizationFormGroup.errors" 
       (click)="onSubmit()">Sign in 
     </button> 
     <div class="forgot-password"> 
      <a href="#">Forgot password?</a> 
     </div> 
    </form> 
</div> 

Answer 2

從您的按鈕刪除(click)="onSubmit()"

<button class="btn btn-lg btn-primary btn-block" type="submit" [disabled]="authorizationFormGroup.errors">