Angular 2在登录时导航到其他页面

Question

我正在开发登录页面。登录成功后，用户将被重定向到不同的页面。在表单中，我保留了表单属性method =“post”，因为我不希望用户名和密码出现在url上。但是，成功登录时，执行this.router.navigate(['post']);时，出现错误“无法POST/POST”。

如果我写method =“get”，事情正常，但用户名和密码都出现在网址上。请让我知道什么是处理这个正确的做法：

login.component.ts的login.html的

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; 
    } 
} 

组成部分

<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以下文字：

的用户应该能够在灌装之后提交此表在窗体底部的提交按钮不执行任何操作它自己的，但它会因为其类型（type =“submit”）而触发表单提交。

“表单提交”目前没用。为了让它有效，我们将更新与另一角指令，NgSubmit标签，并将其与事件结合

Answer 2

当你调用this.router.navigate(['post']);，你是试图告诉路由器导航到URL hostname/post并加载相应的组件。

要么你有一个名为post的组件，这是一个非常糟糕的做法，因为名称选择不当，或者你不理解路由器的正确使用。

---

做你想做什么，你需要设置submit()方法登录组件，让你做一个http.post()呼叫，订阅结果知道，如果认证成功与否;然后在成功通过身份验证后，管理您的路由器以加载要获取的组件。

你应该检查出表单提交和路由从官方文档&导航： https://angular.io/docs/ts/latest/guide/router.html#!#route-config