在angular 2应用程序中从ReST微服务获取数据

我正在尝试从ReST微服务获取数据，该服务为我提供数据（用户名和密码） 以JSON格式（[{“username”：“Mark”，“password”：“mark123”}]）通过其端点 “”

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

我创建了一个routing.ts文件，用于路由我的组件

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

下面显示的是我的代码

app.module.ts app.component.ts app.component.html header.component.html 这是我的登录组件

login.component.html 这是我的主页组件

home.component.ts home.component.html

欢迎来到eSpace主页

---

任何人都可以在我的angular 2应用程序中指导从ReST micro服务获取数据的过程。

您必须向应用程序添加一个服务，该服务将负责向您的组件提供所需的数据。您的服务将使用

$http

对象调用微服务，并使用组件中可访问的可观察对象提供数据。您还需要将服务注入组件。

我知道该过程，但无法在angular 2应用程序中实现它

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

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
 })
export class AppComponent {
  title = '';
}

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

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

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

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

})
export class HeaderComponent {
 }

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

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

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

}

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