随着前端技术的不断发展，前端框架也越来越多，Angular 作为一个主流的前端框架，被越来越多的开发者所使用。在 Angular 中，父组件与子组件之间的交互十分常见，而在子组件中调用父组件的方法也是一个非常重要的问题。
1. 父组件向子组件传递方法
在 Angular 中，父组件向子组件传递方法有三种方法：
1.1 @Input 属性装饰器
通过为子组件添加 @Input 属性装饰器，我们可以在父组件中通过属性绑定方式将方法传递给子组件。具体实现方法如下：
-- -------------------- ---- -------
------ - ---------- ----- - ---- ----------------
------------
--------- ------------
--------- -
------- ---------------------------------------------
-
--
------ ----- -------------- -
-------- ------------- ---------
------------------ -
--------------------
-
-在父组件中，我们可以将方法赋值给 parentMethod 属性，并通过 [parentMethod] 的形式传递给子组件：
<app-child [parentMethod]="parentMethod"></app-child>
1.2 子组件输出事件
子组件可以通过 Output 属性装饰器定义一个事件，当事件被触发时，父组件可以通过监听该事件来调用子组件的方法。具体实现方法如下：
-- -------------------- ---- -------
------ - ---------- ------------- ------ - ---- ----------------
------------
--------- ------------
--------- -
------- ---------------------------------------------
-
--
------ ----- -------------- -
--------- ---------- - --- ------------------------
------------------ -
---------------------------
-
-在父组件中，我们可以通过监听 callParent 事件来调用子组件的方法：
<app-child (callParent)="parentMethod()"></app-child>
1.3 通过 ViewChild 获取子组件实例
在父组件中，我们可以通过 @ViewChild 装饰器获取子组件实例，并直接调用子组件的方法。具体实现方法如下：
-- -------------------- ---- -------
------ - ---------- --------- - ---- ----------------
------ - -------------- - ---- --------------------
------------
--------- -------------
--------- -
-----------------------
-
--
------ ----- --------------- -
-------------------------- ------ ---------------
----------------- -
-----------------------------
-
-在子组件中，我们需要暴露一个公共方法，供父组件调用：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ------------
--------- -
------- --------------------------------------------
-
--
------ ----- -------------- -
----------------- -
------------------------
-
-2. 在子组件中调用父组件的方法
在 Angular 中，子组件调用父组件的方法也有多种实现方式：
2.1 通过 @Output 事件回调
我们可以在子组件中定义一个事件，父组件可以通过输出属性与子组件绑定在一起，当子组件被触发时，可以通过回调函数调用父组件的方法。具体实现方法如下：
-- -------------------- ---- -------
------ - ---------- ------------- ------ - ---- ----------------
------------
--------- ------------
--------- -
------- -----------------------------------------
-
--
------ ----- -------------- -
--------- ---------- - --- ------------------------
--------- -
---------------------------
-
-在父组件中，我们需要为子组件绑定 sendParent 事件，并在对应的方法中调用父组件的方法：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -------------
--------- -
---------- ----------------------------------------------
-
--
------ ----- --------------- -
------------------ -
------------------------
-
-2.2 通过 ViewChild 获取父组件实例
在子组件中，我们可以通过 @ViewChild 装饰器获取父组件实例，并直接调用父组件的方法。具体实现方法如下：
-- -------------------- ---- -------
------ - ---------- --------- - ---- ----------------
------ - --------------- - ---- ---------------------
------------
--------- ------------
--------- -
------- --------------------------------------------------
-
--
------ ----- -------------- -
--------------------------- ------- ----------------
------------------ -
-------------------------------
-
-在父组件中，我们需要暴露一个公共方法，供子组件调用：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -------------
--------- --
--
------ ----- --------------- -
------------------ -
------------------------
-
-3. 总结
通过本文的介绍，我们可以发现，在 Angular 中实现父子组件之间的方法调用是非常简单的。在父组件向子组件传递方法时，我们可以使用 @Input 属性装饰器、子组件输出事件以及通过 ViewChild 获取子组件实例这三种方式。而在子组件调用父组件的方法时，我们可以使用 @Output 事件回调以及通过 ViewChild 获取父组件实例这两种方式。相信在实际开发中，这些技巧会给我们带来很大的帮助和优势。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645826c0968c7c53b0a982df