Angular 2中的表单提交

Question

我已经用我的rest微服务成功实现了Http post请求。

当我使用登录表单发出帖子请求时，如果用户名密码与数据库条目匹配，它会在我的控制台中返回用户名密码。

如果用户名密码不存在，则返回null。

但我只想在成功登录后重定向到我的主页，即如果用户名和密码正确。

如何检查我的控制台是否返回 null 然后我不应该重定向？

下面是我的代码

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HeaderComponent } from "./header.component";
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';

import { GetService } from './home/get.service';
import { PostService } from './login/post.service';

import { routing } from "./app.routing";
import { RouterModule, Routes} from '@angular/router';


import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

@NgModule({

  declarations: [AppComponent,HeaderComponent,LoginComponent,HomeComponent],

  imports: [RouterModule,BrowserModule, HttpModule , routing ],

  providers: [GetService,PostService],

  bootstrap: [AppComponent]

})

export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'

})
export class AppComponent {
  title = '';
}

app.component.html

<div style="text-align:justify-all;">
  <h1>
    {{title}}
  </h1>

 <div class="container">
<router-outlet></router-outlet>
</div>

app.routing.ts

import { Routes, RouterModule } from "@angular/router";
import { LoginComponent } from "./login/login.component";
import { HomeComponent } from "./home/home.component";

const APP_ROUTES: Routes = [
{ path: '' , redirectTo: '/homepage', pathMatch: 'full' },
{ path: 'homepage', component: LoginComponent },
{ path: 'homepage/home', component: HomeComponent }
];

export const routing = RouterModule.forRoot(APP_ROUTES);

header.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
})
export class HeaderComponent {}

header.component.html

<div class="row">
<div class="col-xs-12"><ul class="nav nav-pills">
<li routerLinkActive="active"><a [routerLink]="['/homepage/home']">
<strong>Home</strong></a></li>
<li><a [routerLink]="['/homepage']"><strong>Logout</strong></a></li>
</ul></div>
</div>

这是我实现发布请求的登录组件

login.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { PostService } from './post.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
})


export class LoginComponent {
  data:any;

  constructor(private router:Router ,private MyService: PostService){ }

 checkByCredential(username: string, password: string) 
 {
   this.MyService.checkByCredential(username, password).subscribe(users => console.log(users));

    this.router.navigate(['homepage/home']);
  }
}

如上面 login.component.ts 文件所示，我需要检查我的控制台是否返回 null 然后我不应该重定向，否则我应该重定向到 /homepage/home

login.component.html

<div class="container formWidth" style="text-align:center;">
  <h1> eSpace Login</h1><hr>
<br/>
     <h2>Login</h2>
    <form role="form">
      <div ng-control-group="credentials">
        <label for="username">Username</label>
        <input
          type="text"
          #username
          id="username"
          ng-control="username"
          required>
<br/>
        <label for="password">Password</label>
        <input
          type="password"
          #password
          id="password"
          ng-control="password"
          required>
      </div>
      <button type="button" (click)="checkByCredential(username.value,password.value)">Login</button>
    </form>
</div>

post.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';


@Injectable()
export class PostService {
constructor(private http:Http) { }

 checkByCredential(username: string, password: string) {
 const user = { username: username, password: password };
 return this.http
    .post('http://localhost:8080/checkByCredential', user) 
    .map(result => result.json());
  } }

这是我实现获取请求的主组件

home.component.ts

import { Component } from '@angular/core';
import { GetService } from './get.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})

export class HomeComponent{
 title :string;
  data:any;


  constructor(private MyService: GetService){
  this.title="Angular Service";

  this.MyService.GetUsers()
 .subscribe(users => {this.data=users });
 }
}

home.component.html

<app-header></app-header>
    <hr>
<p> <strong> Welcome to eSpace Home </strong></p>

<!-- <img src="/../../assets/i9.jpeg" class="img-rounded" alt="home" 
height="400" width="1150">-->

    <div style="margin-left:50px; height: 200px; overflow: auto;"> 
        <h4>Angular GET service</h4><hr>
             <table>
                 <tr><td>Username</td>&emsp;&emsp;<td>Password</td></tr>
                 <tr *ngFor= " let item of data">
             <td>{{ item.username }}</td>&emsp;&emsp;<td>{{ item.password }}
 </td>
             </tr>
             </table>
            </div>

get.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';


@Injectable()
export class GetService {
constructor(private http:Http) { }


GetUsers(){
  return this.http.get('http://localhost:8080/checkUsers')
    .map(result => result.json());
           }
 }

这是我输出的屏幕截图

当我使用不在我的数据库中的用户名和密码提交表单时，即使它会将我重定向到主页并在我的控制台中返回 null

当凭据与我的数据库匹配时，即使它重定向到主页并返回凭据

谁能建议我如何验证和重定向？

Answer 1

在您的 login.component.ts 中，您的 router.navigate 在订阅之外。

observable 是异步的，因此router.navigate 将独立于 chechByCredential 触发。

如果您想在获得 API 答案时触发导航，您可以将代码放入订阅中：

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { PostService } from './post.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
})


export class LoginComponent {
  data:any;

  constructor(private router:Router ,private MyService: PostService){ }

 checkByCredential(username: string, password: string) 
 {
   this.MyService.checkByCredential(username, password)
      .subscribe(users => {
           if(users)
              this.router.navigate(['homepage/home']);
           else
              console.log(users) //or do somethings else
      });        
  }
}

Answer 2

您只需将订阅中的重定向移动到您的登录服务：

 checkByCredential(username: string, password: string) 
 {
   this.MyService.checkByCredential(username, password)
   .subscribe(users => {
     console.log(users);
     if (!users) {
       return // <= do nothing if the server's response is null
     } else {
       this.router.navigate(['homepage/home']); // <= redirect if it is ok
       }
    }

  }
}