在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
更新时间：2018年08月06日 08:44:30 作者：_marven
本文分步骤给大家介绍了在 Angular6 中使用 HTTP 请求服务端数据的方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
第一步
准备好api接口地址， 例如 https://api.example.com/api/
第二步
在根组件 app.components.ts 中引入 HttpClientModule 模块。
// app.components.ts
import {HttpClientModule} from "@angular/common/http"; //引入HttpClientModule 模块
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule //声明HTTP模块
],
第三步
在组件中使用HTTP模块向远程服务器请求数据
1.引入HTTP模块
// list.components.ts
import { HttpClient } from "@angular/common/http" //这里是HttpClient
2.在组件的构造函数中实例化 HttpClient
constructor(private http:HttpClient){}
3.创建用来接收数据的变量
public anyList:any
4.通过HTTP的get方法请求数据
ngOnInit() { //这个是初始化
this.http.get("https://api.example.com/api/list")
.subscribe(res=>{ this.anyList = res })
}
// get方法中接收的是一个接口文件的地址，它会接收接口传递过来的数据，并默认处理为json数据。
// subscribe方法是对get接收的数据进行处理。参数 res 就是接收过来的数据对象。然后把 res 对象赋值给anyList变量。
5：前台输出
// list.component.html
<ul *ngFor="let v of anyList"> 循环输出anyList对象数据
<a routerLink="/post/{{v.id}}"> 这里的routerLink是angular的a链接形式
<img src="{{v.thumb}}" alt=""> 这里的v.thumb是调用anyList对象的每条数据的thumb缩略图
<h3>{{v.name}}</h3>
</a>
</ul>
打开前台页面，就可以看到输出的数据信息了。
总结
以上所述是小编给大家介绍的在 Angular6 中使用 HTTP 请求服务端数据的步骤详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
相关文章
这篇文章主要为大家介绍了Angular16如何获得路由参数的实现方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
这篇文章主要为大家介绍了Angular6实现拖拽功能指令drag实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
本文给大家总结了下在Angularjs的模板、控制器、或者服务中使用Filters的方法，有需要的小伙伴可以参考下2016-03-03
这篇文章主要介绍了Angular1.x复杂指令,结合实例形式分析了指令的使用、模板指令、指令的作用域等概念与具体使用技巧,需要的朋友可以参考下2017-03-03
本文主要介绍AngularJS ng-paste 指令,这里对ng-paste 指令的基础资料做了整理,并附有代码示例,有需要的朋友可以参考下2016-08-08
这篇文章主要介绍了AngularJS 单元测试（二）的相关资料,需要的朋友可以参考下2016-09-09
本文主要讲解AngularJS ng-repeat 指令,这里对ng-repeat的基础资料做了整理，并附有示例代码，有兴趣的朋友可以参考下2016-08-08
本文给大家详细分析了Angular2整合其他插件的方法，有兴趣的朋友学习下。2018-01-01
这篇文章主要为大家详细介绍了AngularJS实现星星等级评分功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
Angular中Lazy Loading懒加载陷阱避坑最佳实践
这篇文章主要为大家介绍了Angular中Lazy Loading懒加载陷阱避坑最佳实践,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
最新评论