在 Angular6 中使用 HTTP 请求服务端数据的步骤详解

下面是“在 Angular6 中使用 HTTP 请求服务端数据的步骤详解”的完整攻略。

前言

在 Angular6 中使用 HTTP 请求服务端数据是非常常见的操作。在本文中，我们将会讲述在 Angular6 中使用 HTTP 请求服务端数据的具体步骤，并给出两个示例说明。

步骤

1. 引入 HttpClientModule

在 app.module.ts 中引入 HttpClientModule：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, HttpClientModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 创建服务进行数据请求

我们先创建一个名为 ArticleService 的服务，用于请求文章数据。在 ArticleService 中，我们使用 HttpClient 向服务端请求数据，我们需要在 constructor 中注入 HttpClient，如下：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class ArticleService {
    constructor(private http: HttpClient) { }

    getArticles(): Observable<any> {
        return this.http.get('/api/articles');
    }

    getArticleById(id: string): Observable<any> {
        return this.http.get(`/api/articles/${id}`);
    }
}

上面的代码中，我们声明了两个方法：getArticles 和 getArticleById。它们分别用于获取所有文章和获取单篇文章。其中，我们使用了 HttpClient 的 get 方法获取数据。get 方法返回一个 Observable 对象，我们可以使用 subscribe 方法来订阅返回的数据。

3. 在组件中使用服务

在需要使用文章数据的组件中，我们注入 ArticleService，并使用 subscribe 方法订阅 getArticles 或 getArticleById 返回的数据，如下：

import { Component, OnInit } from '@angular/core';
import { ArticleService } from './article.service';

@Component({
    selector: 'app-articles',
    template: `
        <h2>Articles:</h2>
        <ul>
            <li *ngFor="let article of articles">{{ article.title }}</li>
        </ul>
    `
})
export class ArticleComponent implements OnInit {
    articles: any[];

    constructor(private articleService: ArticleService) { }

    ngOnInit() {
        this.articleService.getArticles().subscribe(data => {
            this.articles = data;
        });
    }
}

由于 getArticles 返回的是一个 Observable 对象，我们在组件中需要使用 subscribe 方法来订阅返回的数据。在示例中，我们使用了 *ngFor 枚举文章列表，并展示了文章标题。*ngFor 是 Angular 的模板指令语法，它用于在模板中重复生成一些 HTML 元素。

如果要获取单篇文章，我们可以在组件中使用 ArticleService 的 getArticleById 方法进行数据请求，代码如下：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ArticleService } from './article.service';

@Component({
    selector: 'app-article-detail',
    template: `
        <h1>{{ title }}</h1>
        <p>{{ content }}</p>
    `
})
export class ArticleDetailComponent implements OnInit {
    title: string;
    content: string;

    constructor(
        private route: ActivatedRoute,
        private articleService: ArticleService
    ) { }

    ngOnInit() {
        this.route.params.subscribe(params => {
            this.articleService.getArticleById(params.id).subscribe(data => {
                this.title = data.title;
                this.content = data.content;
            });
        });
    }
}

上面的代码中，我们使用 ActivatedRoute 获取当前路由中的参数 id，并在 ngOnInit 生命周期钩子中调用 ArticleService 的 getArticleById 方法请求数据。请求成功后，我们将文章标题和内容赋值给了组件中定义的 title 和 content 变量。

示例

这里我们提供两个示例来帮助大家更好的理解。第一个示例演示了如何使用 *ngFor 枚举文章列表。在这个示例中，我们创建了一个名为 ArticleService 的服务和一个名为 ArticleComponent 的组件，用于展示文章列表。示例代码如下：

<!-- app.component.html -->
<app-articles></app-articles>

// article.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class ArticleService {
    constructor(private http: HttpClient) { }

    getArticles(): Observable<any> {
        return this.http.get('/api/articles');
    }
}

// article.component.ts
import { Component, OnInit } from '@angular/core';
import { ArticleService } from './article.service';

@Component({
    selector: 'app-articles',
    template: `
        <h2>Articles:</h2>
        <ul>
            <li *ngFor="let article of articles">{{ article.title }}</li>
        </ul>
    `
})
export class ArticleComponent implements OnInit {
    articles: any[];

    constructor(private articleService: ArticleService) { }

    ngOnInit() {
        this.articleService.getArticles().subscribe(data => {
            this.articles = data;
        });
    }
}

第二个示例演示了如何使用 ActivatedRoute 获取路由参数，并根据参数显示对应文章的详情。在这个示例中，我们创建了一个名为 ArticleDetailComponent 的组件，用于展示单篇文章的详情。示例代码如下：

<!-- app.component.html -->
<a routerLink="/articles/1">Article 1</a>
<a routerLink="/articles/2">Article 2</a>
<router-outlet></router-outlet>

// app.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ArticleDetailComponent } from './article-detail.component';

const routes: Routes = [
    { path: 'articles/:id', component: ArticleDetailComponent }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <a routerLink="/articles/1">Article 1</a>
    <a routerLink="/articles/2">Article 2</a>
    <router-outlet></router-outlet>
  `
})
export class AppComponent {}

// article-detail.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ArticleService } from './article.service';

@Component({
    selector: 'app-article-detail',
    template: `
        <h1>{{ title }}</h1>
        <p>{{ content }}</p>
    `
})
export class ArticleDetailComponent implements OnInit {
    title: string;
    content: string;

    constructor(
        private route: ActivatedRoute,
        private articleService: ArticleService
    ) { }

    ngOnInit() {
        this.route.params.subscribe(params => {
            this.articleService.getArticleById(params.id).subscribe(data => {
                this.title = data.title;
                this.content = data.content;
            });
        });
    }
}

// article.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class ArticleService {
    constructor(private http: HttpClient) { }

    getArticleById(id: string): Observable<any> {
        return this.http.get(`/api/articles/${id}`);
    }
}

以上就是在 Angular6 中使用 HTTP 请求服务端数据的完整攻略，如有任何问题欢迎咨询。