从角度 2 的 ReST Micro 服务中获取数据

Question

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

我在 Angular 2 中创建了一个简单的应用程序，其中包含 userdetail.component.ts 文件和 user.service.ts，它从我的应用程序 assets 文件夹中的 apidata 文件夹中的 userdata.json 文件中获取数据

下面是我的代码

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Injectable } from '@angular/core';
import { HttpModule } from '@angular/http';
import { Http, Response} from '@angular/http';

import { AppComponent } from './app.component';
import { UserListComponent } from './user-list.component';
import {  UserDetailComponent } from './user-detail.component';
import { UserService } from './user.service';

@NgModule({
  declarations: [
    AppComponent,
    UserListComponent,
    UserDetailComponent
  ],

  imports: [ BrowserModule, HttpModule ],

  providers: [UserService],

  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { UserService } from './user.service';

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

  providers: [UserService]


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

app.component.html

 <user-detail></user-detail>

user-detail.component.ts

import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';

@Component({
    selector: 'user-detail',
    template: `<h4>User Details</h4>'
                <ul *ngFor=" let user of users ">
                <li>username={{user.username}}-------password={{user.password}}</li>
                </ul>`
})

export class UserDetailComponent implements OnInit{
users = [];

constructor(private _userService:UserService){}
ngOnInit(){
this._userService.getUsers()
.subscribe(resUserData => this.users = resUserData);
}
}

user.service.ts

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

@Injectable()
export class UserService {
private _url: string = "http://localhost:4200/assets/apidata/userdata.json"
constructor(private _http: Http){}
    getUsers(){
    return this._http.get(this._url)
    .map((response:Response) => response.json() );
}}

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

Answer 1

在使用 REST 时，我们需要在加载（初始化）组件之前预取基本数据。为此，请实现解析器并使用您实现的服务。

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import { UserService } from './user.service';


@Injectable()
export class UserDataResolver implements Resolve<any> {

    constructor(private userService: UserService,
                private router: Router) { }

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
        return this.userService.getUsers()
            .map(response => {
                let users = response['users'];
                if (users) {
                    return users;
                }
                console.log(`NO users`);
                //navigate if you want to....
                this.router.navigate(['']);
                return null;
            })
            .catch(error => {
                console.log(`Retrieval error: ${error}`);
                this.router.navigate(['']);
                return Observable.of(null);
            });
    }
}

现在将此解析器与路由一起使用以通过 REST 加载数据

const appRoutes: Routes = [
    {
     path: '',
     component: AppComponent,
     children: [
      { path: 'user', component: UserComponent, resolve: { users: UserDataResolver } }
     ]
    },
    { path: '**', component: PageNotFoundComponent }

];

在组件中访问这些数据：

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

  usersList:any;
  constructor(private route: ActivatedRoute) {
   }

  ngOnInit() {
    this.usersList = this.route.snapshot.data['users'];
  }

}

如果您想在使用组件时获取一些其他数据，请通过直接注入组件的服务来获取。