angular获取路由参数_「前端」Angular 中的数据交互（get jsonp post）

想要代码的小伙伴可以去GitHub上拉取哦

angualrDemos​github.com

有很多种，有一些也不是很常用了；

在angular中，我们与后端的数据交互也有好几种，有些方法也是需要解决跨域的问题，下面就简单的述说下angualr中的数据交互方式：

Angular 通过自带的 get 请求数据

首先新建了一个空项目，项目中新建一个组件和服务，另外再建一个配置文件存储本地用户信息，供组件获取：

1、服务创建：

import 

在服务中，首先定义一个api地址，也就是数据源，然后再引入 HttpClient 组件，在HttpClient中提供了get方法，可以直接传入数据源来获取数据；

2、创建配置文件

在项目的 src/assets/commConfig 下，新建userInfo.json文件，里面录入目标数据：

3、在组件中定义引入服务，直接获取数据

首先在组件的构造方法里声明服务

constructor

然后直接调用服务获取数据：

/**

在页面上展示一下：

通过get获取数据

展示的数据和咱们配置文件的信息是一致的；

Angular 中 post 提交数据

下面再搞个示例来实现一下功能，在界面提交寄一些数据给后端，后端再把最新数据返给前端展示：动手

1、首先利于express创建一个后端服务，用来供客户端调用

下面把package.json和服务内容贴出来

package.json

{
  

服务（app.js)

var 

2、在组建中定义方法，我们给api传递 {name:this.username, age:this.age} 这样的一个对象，看他是如何处理的。

/**

接下来我们访问下127.0.0.1:3000/add,看下结果是什么？

可以看到在调用服务的过程中，已经接受到了服务的响应

也可以看到我们传递的参数和响应，其实呢和代码写的是一样的

接下来我们看看展示在页面上看看：

不错，还是可以的；

Angular 中通过 Jsonp 请求数据

Jsonp也是我们目前使用的解决跨域问题的一种办法，不过需要后端支持才行啊；

下面就展开写写

首先呢，在组件的父组件中引入 HttpClientJsonpModule 模块，来处理Jsonp请求，

import 

然后再组建中引入 HttpClient 模块，它下面就有Jsonp方法；

import 

然后定义方法获取指定api的数据，通过HttpClient提供的jsonp方法：这个API是我在

接口大全-免费API,收集所有免费的API​www.free-api.com

中找的一个实时段子的API，也是支持Jsonp方式的；

getDataByJsonp

那我们看看能不能通过这个api拿到一些段子傍身呢？

很有意思啊，它返回了两条段子，不错了，我补充的清楚点的图：

---

-------------------------------------------END-----------------------------------------------