什么是 simple-context-angular2？
simple-context-angular2 是一个基于 Angular2 框架封装的 npm 包，能够快捷、便捷地实现组件间的数据通信，精简了大量的模板代码，提高了代码的复用性，提升了编码效率。简单来讲，就是一种在 Angular2 中使用 context API 传递数据的方式。
安装 simple-context-angular2
在使用 simple-context-angular2 之前，需要在项目中安装该 npm 包：
npm install simple-context-angular2 --save
使用指南
1. 创建数据服务类
在 Angular2 中，我们需要创建一个数据服务类，来定义需要在组件间传递的数据和方法。这里我们以 HeroService 为例：
-- -------------------- ---- -------
------ ------------ ---- ----------------
------ --------------- ---- --------------------------
------ ------------ -------- ---- -------
-------------
------ ----- ----------- -
------- ----- - --- ------------------
------ ------------------ - --------------------------
---------------- --------
------------- ------- -
----------------------
-
-@SimpleContext() 是 simple-context-angular2 的核心装饰器，用来为数据注入 context 对象，使得数据可以在组件间流通。
2. 注册数据服务类
在 app.module.ts 中注册 HeroService：
-- -------------------- ---- ------- ------ ---------- ---- ---------------- ------ --------------- ---- ---------------------------- ------ -------------- ---- ------------------ ------ ------------- ---- ----------------- ----------- ------------- --------------- -------- ---------------- ---------- -------------- ---------- -------------- -- ------ ----- --------- --
3. 在组件中使用数据
在需要使用数据的组件中，我们可以通过 @SimpleContext() 装饰器获取 context 对象，并调用数据服务类中定义的方法，从而读取和修改数据。
这里以 HeroDetailComponent 组件为例：
-- -------------------- ---- -------
------ ----------- ---- ----------------
------ ------------- ---- -----------------
------ -------------- ---- -------
------------
--------- --------------
--------- -
---- ------------ - ----- -- -------------- -- -- ----------
------ ------------------ ------------------- --
-
--
------ ----- ------------------- -
----- -------
------ -------------
------------------- ------------ ------------ --
---------- -
---------- - ------------------------------------- -- -
--------- - -----
---
-
------------- -
-------------------------
-
---------- -
------------------------------------
-
-我们可以从 HeroService 中获取到 name$ Observable，并将其绑定到模板上，在 HeroDetailComponent 中订阅 name$ ，根据 name$ 的值显示对应的英雄名字。在修改英雄名字时，调用 HeroService 中的 setName 方法，将新的数据传递给 Name Observable。
4. 父组件和子组件间的数据通信
simple-context-angular2 支持组件之间的父子关系，可以实现父组件向子组件传递数据。
这里我们以 HeroListComponent 和 HeroDetailComponent 为例，HeroListComponent 是父组件，HeroDetailComponent 是子组件，HeroListComponent 向 HeroDetailComponent 传递了一个 hero 对象。
-- -------------------- ---- -------
------ ----------- ---- ----------------
------ ------------- ---- -----------------
------------
--------- ------------
--------- -
---- ----------- ---- -- ------- ---------------------------
-------------
------
------------ ------------------------------------
-
--
------ ----- ----------------- -
------ - ----- -- ----- ------------ ---- -- ----- ---------- ---- -- ----- ------------
-------------
------------------- ------------ ------------ --
---------------- -
----------------- - -----
-------------------------- ------------- ---- ---
-
--- -------------------- ---- -------
------ ----------- ------ ---- ----------------
------ ------------- ---- -----------------
------ -------------- ---- -------
------------
--------- --------------
--------- -
---- -------------
------------- -- -- ----
------
-
--
------ ----- ------------------- -
-------- --- ----------- -
-------------------
-
-我们在 HeroListComponent 中调用 HeroService 中的 context 方法，将选中的英雄信息存到 context 对象中。在 HeroDetailComponent 中，通过使用 @Input() 装饰器，绑定 hero 对象，读取存储在 context 中的信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557fc81e8991b448d516b