Angular 2 перейти на другую страницу при входе

Question

Я разрабатываю страницу входа. При успешном входе в систему пользователь будет перенаправлен на другую страницу. В форме я сохранил форму attribute method = "post", потому что я не хочу, чтобы имя пользователя и пароль отображались на URL-адресе. Однако при успешном входе в систему, когда выполняется this.router.navigate(['post']);, я получаю сообщение об ошибке «не может POST/post».

Если я пишу метод = «получить», все работает, но имя пользователя и пароль появляются на URL-адресе. Пожалуйста, дайте мне знать, что было бы правильным подходом справиться с этим:

login.component.ts

import { Component, trigger, state, style, transition, animate } from '@angular/core'; 
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 
import { AuthenticatorService } from './authenticator.service'; 
import { Router } from '@angular/router'; 

@Component({ 
    selector: 'login', 
    templateUrl: 'template/login.html', 
    animations: [ 
     trigger('heroState', [ 
      state('inactive', style({ 
       height: '0', 
       paddingTop: '0', 
       paddingBottom: '0', 
       marginTop: '0', 
       marginBottom: '0', 
       visibility: 'hidden', 
       overflowY: 'hidden' 
      })), 
      state('active', style({ 

      })), 
      transition('inactive => active', animate('300ms ease-in')), 
      transition('active => inactive', animate('300ms ease-out')) 
     ]) 

    ] 
}) 
export class LoginComponent { 

    private formGroup: FormGroup; 
    private authenticated = false; 
    private loginErrorMessage = 'inactive'; 
    constructor(formBuilder: FormBuilder, private authenticator: AuthenticatorService, private router: Router) { 
     this.formGroup = formBuilder.group({ 
      username: ['', [Validators.required, Validators.minLength(3)]], 
      password: ['', Validators.required] 
     }); 
    } 

    onClick() { 
     this.authenticated = this.authenticator.authenticate(this.formGroup.controls["username"].value, this.formGroup.controls["password"].value); 
     this.loginErrorMessage = this.authenticated?'inactive':'active'; 
     setTimeout(()=>{ 
      if(this.loginErrorMessage === 'active') { 
       this.loginErrorMessage='inactive'; 
      } 
     },3000); 
     if(this.authenticated) { 
      this.router.navigate(['post']); 
     } 
    } 

    getLoginStatus() { 
     return this.loginErrorMessage; 
    } 
} 

образуют часть login.html

<form [formGroup]="formGroup" role="form" action="" method="post" class="login-form"> 
     <div *ngIf="formGroup.controls.username.touched && formGroup.controls.username.errors && formGroup.controls.username.errors.required" class="error-text">Username is required</div> 
     <div *ngIf="formGroup.controls.username.touched && formGroup.controls.username.errors && formGroup.controls.username.errors.minlength" class="error-text">Username must be atlease three characters long</div> 
     <div class="form-group"> 
      <label class="sr-only" for="form-username">Username</label> 
      <input formControlName="username" type="text" name="form-username" placeholder="Username..." class="form-username form-control" id="form-username"> 
     </div> 
     <div class="form-group"> 
      <label class="sr-only" for="form-password">Password</label> 
      <input formControlName="password" type="password" name="form-password" placeholder="Password..." class="form-password form-control" id="form-password"> 
     </div> 
     <button [disabled]="!formGroup.valid" (click)="onClick()" type="submit" class="btn">Sign in!</button> 
    </form> 

Answer 1

Другой ответ в полезный и помог мне решить эту проблему. Тем не менее, я размещаю здесь фактическое исправление, которое решило проблему.

Мне нужно было удалить (click)="onClick()" на кнопку отправки и добавить элемент формы (ngSubmit)="onClick()".

Следующий текст из углового documentation помог в понимании:.

Пользователь должен иметь возможность отправить данную форму после ее заполнения Кнопка Submit в нижней части формы ничего не делает самостоятельно, но он будет вызывать отправку формы из-за своего типа (type = "submit").

«Форма представления» в данный момент бесполезна. Для того, чтобы сделать его полезным, мы будем обновлять метку с другой Угловой директивой, NgSubmit, и привязать его к методу HeroFormComponent.submit() с событием связыванием

Answer 2

Когда вы звоните this.router.navigate(['post']);, вы пытаясь сказать маршрутизатору перейти к URL hostname/post и загрузить соответствующий компонент.

Либо у вас есть компонент под названием post, и это очень плохая практика, так как имя не очень хорошо выбрано или вы не понимаете правильного использования маршрутизатора.

---

Чтобы сделать то, что вы хотите, вам нужно настроить метод submit() на компоненте входа в систему, так что вы делаете http.post() вызов и подписаться на результат, чтобы знать, если аутентификация была успешной или нет; а затем управлять маршрутизатором для загрузки компонента, который вы хотите получить после успешной аутентификации.

Вы должны проверить форму представления и маршрутизации & навигации от официальной документации: https://angular.io/docs/ts/latest/guide/router.html#!#route-config