从 Angular 2 应用程序中的 ReST 微服务获取数据

Question

我正在尝试从提供数据（用户名和密码）的 ReST 微服务中获取数据 通过其端点以 JSON 格式 ( [{"username":"Mark","password":"mark123"}] ) "http://localhost:8080/checkUsers"

我在 Angular 2 中创建了一个简单的应用程序，其中包含登录和主页组件，其中包括 .html 和 .ts 文件。

我创建了一个路由我的组件的 routing.ts 文件。

我还包含了一个 header.component.ts 和 header.component.html，它们实现了我的应用程序的菜单栏。

下面是我的代码

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 { routing } from "./app.routing";
import { LoginComponent } from './login/login.component';
import { RouterModule, Routes} from '@angular/router';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [ AppComponent, HeaderComponent, LoginComponent, 
HomeComponent],

  imports: [ RouterModule, BrowserModule, routing  ],

  providers: [],

  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: '/login', pathMatch: 'full' },
{ path: 'login', component: LoginComponent },
{ path: 'home', component: HomeComponent },
];
export const routing = RouterModule.forRoot(APP_ROUTES);

header.component.html

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

header.component.ts

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

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

})
export class HeaderComponent {
 }

这是我的登录组件

login.component.html

  <div class="container formWidth" style="text-align:left;">
    <h1> eSpace Login</h1>
<br/>
   <form (submit)="loginUser($event)">
    <div class="form-group">
      <label for="Username">Username:</label>
      <input type="Username"  id="Username" placeholder="Enter Username" 
name="Username">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password"  id="pwd" placeholder="Enter password" 
name="pwd">
    </div>

    <br/>
       <button type="submit" class="btn btn-default">Submit</button>
  </form>

</div>

login.component.ts

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

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
})
export class LoginComponent implements OnInit {

  constructor(private router:Router ) {
   } 
  ngOnInit() {
  }

loginUser(e){
e.preventDefault();
 console.log(e);
    var username=e.target.elements[0].value;
    var password=e.target.elements[1].value;

    if (username == 'heena' && password == 'mille' )  
    this.router.navigate(['home']);
}
}

这是我的主组件

home.component.ts

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

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

  constructor() { }

  ngOnInit() {
  }

}

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

请任何人指导我在我的 Angular 2 应用程序中从 ReST 微服务获取数据的过程。

Answer 1

您必须向您的应用添加一项服务，该服务负责向您的组件提供所需的数据。您的服务将使用$http 对象来调用微服务并使用可在您的组件中访问的可观察对象提供数据。您还需要将服务注入到您的组件中。