Question

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

我使用包含.html和.ts文件的登录和家庭组件在角度2中创建了一个简单的应用程序。

我创建了一个路由我的组件的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">

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

Answer 1

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

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