Angular 第二阶段表格提交

我已经用rest micro服务成功地实现了Http post请求

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

如果用户名密码不存在，它将返回null

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

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

下面显示的是我的代码 app.module.ts app.component.ts app.component.html header.component.ts header.component.html 如上所示，在login.component.ts文件中，我需要检查我的控制台是否返回null，然后我不应该重定向，否则我应该重定向到/homepage/home

login.component.html 这是我的主页组件，我在其中实现了get请求 home.component.ts home.component.html 以下是我的输出的屏幕截图 当我使用数据库中不存在的用户名和密码提交表单时，它会将我重定向到主页，并在控制台中返回null

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

---

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

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

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

  }
}

checkByCredential（用户名：string，密码：string）
{
this.MyService.checkByCredential（用户名、密码）
.订阅（用户=>{
console.log（用户）；
如果（！用户）{
返回//在您的login.component.ts中，您拥有您的
路由器。导航到订阅之外的

一个可观察对象是异步的，因此，
路由器。导航
将独立于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
      });        
  }
}

非常感谢您的回复。我将尝试一下，稍后回来。我在终端中收到此错误，但我无法解决。C:/Angular/homepage/src/app/login/login.component.ts（24,7）中的错误：需要声明或声明。我忘记了后面的括号，否则可能是，如果您复制我的代码感谢您的回复并共享此有价值的信息，请再查询一次我更新了我的代码，但我在终端中发现此错误，我无法解决。请用C:/Angular/homepage/src/app/login/login.component引导meERROR.ts（20,24）：“；”应为。C:/Angular/homepage/src/app/login/login.component.ts（29,1）中出现错误：应为声明或语句。C:/Angular/homepage/src/app/login/login.component.ts（21,11）中出现错误：找不到名称“用户”。
<div style="text-align:justify-all;">
  <h1>
    {{title}}
  </h1>

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

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

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

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

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

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']);
  }
}

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

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

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

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

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

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

  }
}

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