在Angular应用程序中，组件之间的通讯是必不可少的。angular2-callcomponent是一个npm包，它提供了一种简单的方式来访问指定组件的函数或属性，
安装
使用npm安装angular2-callcomponent包：
npm i angular2-callcomponent --save
使用
在需要调用组件的地方，添加以下代码：
-- -------------------- ---- -------
------ - --------------- - ---- -------------------------
------------
--------- ------------------
------------ -------------------------------
---------- -------------------------------
--
------ ----- ------------------- ---------- ------ -
------------------- ---------------- ---------------- - -
---------- - -
------------- -
----- ---------- - -----------------------------------------------------------------
-- ------------ -
-------------------
-
-
-上面的代码中，我们导入了ComponentCaller ，他是我们用于访问其他组件的工具。接着我们在构造函数中注入了ComponentCaller 的实例，并且在handleClick方法中访问了另外一个组件。
我们可以在需要使用的组件中，通过将当前组件的实例传递给ComponentCaller 的registerComponentInstance方法来注册该组件。
-- -------------------- ---- -------
------ - --------------- - ---- -------------------------
------------
--------- ------------------
------------ -------------------------------
---------- -------------------------------
--
------ ----- ------------------- ---------- ------ -
------------------- ---------------- ---------------- - -
---------- -
--------------------------------------------------------------------- ------
-
------- -
--------------- ---------------
-
-采用上述方式，我们在第一个组件中就可以访问另外一个组件的方法和属性了。
示例代码
在示例代码中，我们创建了两个具有交互和依赖关系的组件，一个是goodlist组件，另一个是cart组件，goodlist 中包含一个button按钮，当点击它时，它触发 cart组件中的addItem方法，从而将商品加入 cart 中。
goodlist.component.ts
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - --------------- - ---- -------------------------
------------
--------- ---------------
--------- -
----
--- ----------- ---- -- -------------------------
-----
------- ------------------------- -- -------------
--
---------- ----------------------------
--
------ ----- ----------------- ---------- ------ -
------ ----- - -
- --- -- ----- ------ ------ -- --
- --- -- ----- ------- ------ -- --
- --- -- ----- -------- ------ -- --
- --- -- ----- ------ ------ ----- -
--
------------------- ---------------- ---------------- - -
---------- -
------------------------------------------------------------------- ------
-
----------- -
----- ---- - -----------------------------------------------------------
----------------------------
-
-cart.component.ts
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - --------------- - ---- -------------------------
------------
--------- -----------
--------- -
----
--- ----------- ---- -- --------------------------
-----
--
---------- ------------------------
--
------ ----- ------------- ---------- ------ -
------ ----- - ---
------------------- ---------------- ---------------- - -
---------- -
--------------------------------------------------------------- ------
-
------------- -
----------------------
-
-总结
angular2-callcomponent是一种访问其他组件的简单方式，使得组件之间的交互变得更加容易。在实际的项目中，它可以作为一种有效的解决方案来简化代码，并降低应用程序的复杂度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005629781e8991b448dfc54