介绍
angular2-in-memory-web-api 是一个 Angular 的 npm 包，它允许你在开发过程中使用 in-memory web api （即虚拟的后端数据），这对于开发者来说是非常方便的，因为它可以避免安装和配置本地服务器。
在本文中，我们将学习如何使用 angular2-in-memory-web-api 包来模拟后端数据以及如何使用虚拟的后端数据与前端交互。
安装
要使用 angular2-in-memory-web-api，你需要安装它。你可以使用下面的命令来安装它：
npm install angular2-in-memory-web-api --save
使用
一旦你安装了 angular2-in-memory-web-api，你需要将它导入到你的 app module 中。
import { InMemoryWebApiModule } from 'angular2-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data.service'; // 需要自己创建的模拟数据接口
@NgModule({
imports: [
InMemoryWebApiModule.forRoot(InMemoryDataService)
]
})在代码中，我们导入了 InMemoryWebApiModule，并在 imports 中将它加入了 app module 中。其次，我们还需要创建一个模拟数据接口，我们可以使用一个名为 InMemoryDataService 的服务来实现它。这个服务需要实现一个接口 InMemoryDbService，它可以让我们在 service 中设置虚拟的数据。
下面是一个 InMemoryDataService 的实现：
-- -------------------- ---- -------
------ - ----------------- - ---- -----------------------------
------ ----- ------------------- ---------- ----------------- -
---------- -
--- ------ - -
- --- -- ----- ----------- ------ -------- --
- --- -- ----- ------------ ------ -------------- --
- --- -- ----- ------- ------- ------ ---------- -
--
------ ---------
-
-我们在这个服务中定义了一个名为 heroes 的数组，它包含了三个超级英雄的数据，每一个英雄有一个 id、一个名字和一种能力。
使用模拟数据
模拟后端数据已经准备好了，现在我们可以在组件中使用它了。例如，我们可以创建一个组件来显示这些超级英雄：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---- - ---- ---------
------ - ----------- - ---- -----------------
------------
--------- -------------
--------- -
--------- -----------
----
--- ----------- ---- -- --------
------------- ----------------
-----
-----
-
--
------ ----- --------------- ---------- ------ -
------- -------
------------------- ------------ ------------ - -
---------- -
----------------------------
-----------
------ -- ----------- - -------
----- -- --------------------
--
-
-我们导入了一个名为 HeroService 的服务，这个服务定义了一个获取超级英雄的方法 getHeroes，此方法封装了 http 请求，并返回一个 Observable 类型的结果。
我们在 ngOnInit 中调用了 getHeroes 方法，并订阅了其返回的 Observable，当数据到达组件时，我们将它设置为 heroes 属性，以便我们能够在组件的 template 中使用并显示数据。
我们的 HeroService 的实现如下：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---- - ---- ----------------
------ - ---------- - ---- ----------
------ ------------------------
------ - ---- - ---- ---------
-------------
------ ----- ----------- -
------- --------- - ------------- -- --- -- --- ---
------------------- ----- ----- - -
------------ ------------------ -
------ -----------------------------
------------- -- -------------------- -- --------
-
-由于我们使用了 in-memory web api，实际上并没有与后端进行数据交互，而是通过浏览器的内存来存储和访问数据。
示例代码
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ---------- - ---- ----------------
------ - -------------------- - ---- -----------------------------
------ - ------------------- - ---- ---------------------------
------ - ------------ - ---- ------------------
------ - --------------- - ---- ---------------------
------ - ----------- - ---- -----------------
-----------
-------- -
--------------
-----------
-------------------------------------------------
--
------------- -
-------------
---------------
--
---------- --------------
---------- --------------
--
------ ----- --------- - --- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---- - ---- ----------------
------ - ---------- - ---- ----------
------ ------------------------
------ - ---- - ---- ---------
-------------
------ ----- ----------- -
------- --------- - ------------- -- --- -- --- ---
------------------- ----- ----- - -
------------ ------------------ -
------ -----------------------------
------------- -- -------------------- -- --------
-
--- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---- - ---- ---------
------ - ----------- - ---- -----------------
------------
--------- -------------
--------- -
--------- -----------
----
--- ----------- ---- -- --------
------------- ----------------
-----
-----
-
--
------ ----- --------------- ---------- ------ -
------- -------
------------------- ------------ ------------ - -
---------- -
----------------------------
-----------
------ -- ----------- - -------
----- -- --------------------
--
-
--- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
-------------------------
-
--
------ ----- ------------ - --- -------------------- ---- -------
------ - ----------------- - ---- -----------------------------
------ ----- ------------------- ---------- ----------------- -
---------- -
--- ------ - -
- --- -- ----- ----------- ------ -------- --
- --- -- ----- ------------ ------ -------------- --
- --- -- ----- ------- ------- ------ ---------- -
--
------ ---------
-
-结论
在本文中，我们学习了如何使用 angular2-in-memory-web-api 包来在开发过程中使用虚拟的后端数据，从而避免了安装和配置本地服务器。 我们还学习了如何在服务中设置虚拟数据以及如何使用 http 请求来从虚拟的后端数据中获取数据。最后，我们还提供了示例代码，以便理解和学习。这些示例代码可以通过使用 npm 包管理器进行安装和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/angular2-in-memory-web-api