Angular 是一个流行的前端框架，通过组件化的方式来构建应用程序。组件是 Angular 中最重要的代码单元，可以组成复杂的应用程序，通过组件之间的交互来完成各种任务。本文将介绍 Angular 组件之间的交互方式，帮助你更好地理解和应用组件化开发模式。
父子组件之间的交互
在 Angular 中，组件树形结构是一个常见的应用程序架构。父组件可以包含子组件，子组件也可以包含更多的子组件。父子组件之间的交互非常常见和重要，可以通过属性绑定和事件绑定来实现。
属性绑定
通过属性绑定，父组件可以将数据传递给子组件，并影响子组件的渲染结果。在父组件模板中，我们可以使用方括号将属性值绑定到组件上：
<app-child [message]="parentMessage"></app-child>
在子组件中，我们需要使用 @Input 装饰器来声明属性，以便 Angular 可以自动解析父组件传递过来的数据：
-- -------------------- ---- ------- ------ - ---------- ----- - ---- ---------------- ------------ --------- ------------ --------- ------ ------- -------- -- ------ ----- -------------- - -------- -------- ------- -
在这个例子中，父组件可以在它的控制器类中声明 parentMessage 属性，子组件接收这个属性，并将它渲染到页面上。
事件绑定
与属性绑定类似，通过事件绑定，子组件可以触发父组件的行为。在子组件中，我们可以使用 EventEmitter 来发布自定义事件，并接收父组件的事件监听器。
-- -------------------- ---- -------
------ - ---------- ------------- ------ - ---- ----------------
------------
--------- ------------
--------- -------- ------------------------- -------------
--
------ ----- -------------- -
--------- ------------- - --- ---------------------
--------- -
--------------------------
-
-在父组件中，我们可以使用方括号将父组件的方法绑定到子组件上：
<app-child (buttonClicked)="onChildButtonClicked()"></app-child>
当子组件的按钮被点击时，它将触发 buttonClicked 事件，并调用父组件的方法 onChildButtonClicked()。
跨组件之间的交互
除了父子组件之间的交互，跨组件之间的交互也很常见和重要。在 Angular 中，我们可以使用服务来实现跨组件的数据共享和通信。
服务
服务是一种可注入的类，它可以在组件之间共享数据和逻辑。在 Angular 中，服务是通过 @Injectable() 装饰器来声明的。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
-------------
----------- -------
--
------ ----- ----------- -
------- ----- -------- - ---
------------- ------- -
---------------------
-
--------- -
------ ---------------
-
-在这个例子中，我们声明了一个 DataService，它包括两个方法 addData() 和 getData()，分别用于添加和获取数据。通过 @Injectable() 装饰器的 providedIn 属性，我们可以让这个服务成为应用程序的根级别提供者，可以在任何组件中注入和使用。
依赖注入
在组件中，我们可以使用构造函数和依赖注入（Dependency Injection）来注入服务。在组件的控制器类中，我们可以声明一个参数，它是一个要注入的服务的实例。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- ------------------
------------
--------- -------------------
--------- -------- ------------------------- ---------------
--
------ ----- ----------- -
------------------- ------------ ------------ --
----------- -
------------------------------ --- -------
-
-在这个例子中，我们注入了一个 DataService，当按钮被点击时，我们调用 addData() 方法，向服务中添加一条新数据。
观察者模式
除了数据共享，服务还可以实现跨组件的通信。通常来说，服务将自己作为一个可观察对象（Observable），并提供一些公共方法来订阅这个对象的状态变化。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ----------- ------- - ---- -------
-------------
----------- -------
--
------ ----- ------------------- -
------- ------- - --- ------------------
--------------- ------- -
---------------------------
-
-------- ------------------ -
------ ----------------------------
-
-在这个例子中，我们声明了一个 NotificationService，它包括两个方法 notify() 和 watch()，用于触发和订阅通知事件。notify() 方法将消息发布到 Observable 对象中，而 watch() 方法返回这个对象的可观察接口，供其他组件订阅。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------- - ---- --------------------------
------------
--------- -------------------
--------- -------- --------------------------- -------------
--
------ ----- ----------- -
------------------- -------------------- -------------------- --
---------- -
------------------------------------ -----------
-
-在这个例子中，我们注入了一个 NotificationService，当按钮被点击时，我们调用 notify() 方法，发送一个通知消息。其他组件可以通过订阅 watch() 方法，来接收这个消息，并进行处理。
结论
Angular 组件之间的交互方式非常灵活，有多种方式可以实现同样的目标。通过属性绑定和事件绑定，父子组件之间可以共享数据和行为。通过服务和依赖注入，跨组件之间可以共享数据并进行通信。对于复杂的应用程序开发，灵活地运用组件化开发模式，将会使你的代码更易于维护和扩展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67302581eedcc8a97c91302c