在 Angular 开发过程中，组件通信是非常重要的一部分，而且通常也比较复杂。本文将探讨一些常见的组件通信问题和解决方法，帮助你更好地理解 Angular 的组件通信机制。
问题一：如何从一个父组件向子组件传递数据？
这是 Angular 中最常见的一个问题。通常，父组件需要把数据传递给它的子组件，然后子组件会根据这些数据来更新它们自己的状态或视图。在 Angular 中，有两种方法可以实现这个目的：使用 @Input 装饰器或者输入属性绑定。
使用 @Input 装饰器
@Input 装饰器允许你将一个属性标记为可从父组件传递到子组件的输入属性。这个属性可以在子组件中被绑定和访问。
例如，我们有一个 Hero 组件，我们想要从一个 Heroes 父组件向它传递一个 hero 实例。我们可以在 Hero 组件中添加一个 @Input 装饰器来实现这个目的：
-- -------------------- ---- -------
------ - ---------- ----- - ---- ----------------
------------
--------- -----------
--------- -
---------------------
-
--
------ ----- ------------- -
-------- ----- ----
--- ---------- -
------ --------- - -------------- - ---
-
-现在，在 Heroes 父组件中，我们可以通过使用输入属性绑定来将一个 hero 实例传递给 Hero 组件：
<app-hero [hero]="selectedHero"></app-hero>
输入属性绑定
第二种方法是使用输入属性绑定。在这种情况下，我们可以使用方括号([prop])来将属性绑定到父组件的变量或属性。这与使用 @Input 装饰器是等效的，但是在一些情况下，输入属性绑定可能更易于使用。
例如，在我们的 Hero 组件中，我们可以使用输入属性绑定来传递一个 hero 实例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---------------------
-
--
------ ----- ------------- -
----- ----
--- ---------- -
------ --------- - -------------- - ---
-
-<app-hero [hero]="selectedHero"></app-hero>
注意，在这个例子中，我们去掉了 @Input 装饰器，并将 hero 属性声明为一个普通属性。这是因为我们使用了输入属性绑定，而不是使用 @Input 装饰器，来实现从父组件向子组件的数据传递。
问题二：如何从一个子组件向父组件传递数据？
在某些情况下，我们需要从一个子组件向它的父组件传递一些数据，以便父组件可以根据这些数据来更新它自己的状态或视图。在 Angular 中，可以使用 @Output 装饰器或事件绑定来实现这个目的。
使用 @Output 装饰器
@Output 装饰器允许你将一个事件标记为可从子组件触发的输出事件。这个事件可以被父组件捕获并处理。
例如，在我们的 Hero 组件中，我们想要向它的父组件发送一个 selected 事件，每当用户选择一个英雄的时候。我们可以在 Hero 组件中定义一个 selected 事件，并使用 @Output 装饰器来表示它是一个输出事件：
-- -------------------- ---- -------
------ - ---------- ------- ------------ - ---- ----------------
------------
--------- -----------
--------- -
---- -----------------------
-------------
------
-
--
------ ----- ------------- -
--------- -------- - --- --------------------
----- ----
------------ -
------------------------------
-
-现在，在 Heroes 父组件中，我们可以通过使用事件绑定来订阅 Hero 组件的 selected 事件：
<app-hero (selected)="onHeroSelected($event)" [hero]="hero"></app-hero>
当 Hero 组件中的 selectHero() 方法被调用时，selected 事件将被触发，并传递一个 hero 实例。这个事件将通过事件绑定传递到父组件中的 onHeroSelected() 方法中。
使用 EventEmitter
第二种方法是使用 EventEmitter。在这种情况下，我们可以创建一个新的 EventEmitter 实例，并使用它来发送我们的事件。这与使用 @Output 装饰器是等效的，但是在一些情况下，EventEmitter 可能更易于使用。
例如，我们可以在 Hero 组件中创建一个 selected 事件，并使用 EventEmitter 来发送它：
-- -------------------- ---- -------
------ - ---------- ------------- ------ ------ - ---- ----------------
------------
--------- -----------
--------- -
---- -----------------------
-------------
------
-
--
------ ----- ------------- -
-------- ----- ----
--------- --------- ----------------- - --- --------------------
------------ -
------------------------------
-
-注意，我们需要从 @Output 装饰器更改为自己创建的 selected 属性，作为一个新的 EventEmitter。
<app-hero (selected)="onHeroSelected($event)" [hero]="hero"></app-hero>
当 Hero 组件中的 selectHero() 方法被调用时，selected 事件将被触发，并传递一个 hero 实例。这个事件将通过事件绑定传递到父组件中的 onHeroSelected() 方法中。
问题三：如何在不相关的组件之间进行通信？
有时候，我们需要从一个组件向另一个不相关的组件发送消息，或者访问另一个组件中的数据。在 Angular 中，可以使用服务和共享数据模型来实现这个目的。
使用服务
服务是一个可注入的对象，它主要用于组件之间共享数据和逻辑。通过将共享数据和函数放在一个服务中，不同的组件可以通过依赖注入使用它。服务还可以通过依赖注入来实现单例模式。
例如，我们有一个 MessageService，我们想要在不相关的组件之间共享消息。我们可以在 MessageService 中定义一个 messages 数组，并在它的方法中提供添加、清空和获取消息的功能：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
-------------
----------- ------
--
------ ----- -------------- -
--------- -------- - ---
------------ ------- -
----------------------------
-
------- -
------------- - ---
-
----- -
------ --------------
-
-现在我们可以将 MessageService 作为一个可注入的服务，在两个不相关的组件中使用它。我们可以从一个组件中添加一条消息，然后从另一个组件中获取它：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- --------------------
------------
--------- ---------------------
--------- -
------- ---------------------------- ----------------
-
--
------ ----- ---------------------- -
------------------- --------------- --------------- --
------------- -
------------------------------ ---- -----------------
-
--- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- --------------------
------------
--------- -----------------------
--------- -
----
--- ----------- ------- -- --------------------------
-----
-
--
------ ----- ------------------------ -
--------- ---------
------------------- --------------- --------------- -
------------- - --------------------------
-
-请注意，我们在每个组件的 constructor() 中注入了 MessageService 服务，这样我们就可以在组件中使用它。在 MessageSenderComponent 组件中，我们使用 add() 方法将一条消息添加到 MessageService 中。在 MessageReceiverComponent 组件中，我们使用 get() 方法获取 MessageService 中的所有消息，并将它们显示在一个列表中。
共享数据模型
第二种方法是使用共享数据模型。在这种情况下，我们可以创建一个数据模型，并将它注入到多个组件中。这些组件可以使用这个数据模型来访问和更新共享数据。
例如，我们可以创建一个 HeroService，它包含一个 heroes 数组，然后将这个服务注入到我们的 HeroListComponent 和 HeroDetailComponent 组件中：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------ - ---- ----------------
-------------
----------- ------
--
------ ----- ----------- -
------ - -------
----------- -
------ ------------
-
--- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- -----------------
------------
--------- ----------------
--------- -
----
--- ----------- ---- -- --------------------------
-----
-
--
------ ----- ----------------- -
------- ------
------------------- ------------ ------------ -
----------- - -----------------------------
-
--- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- -----------------
------------
--------- ------------------
--------- -
---------------------
-
--
------ ----- ------------------- -
--------- -------
------------------- ------------ ------------ --
--- ------ -
------ ----------------------------------- -- --------- --- ---------------
-
--- ---------- -
------------- - ----------
-
-请注意，我们在 HeroService 的 constructor() 中注入了 heroes 数组，并将它们存储在了一个共享的数据模型中。在 HeroListComponent 中，我们通过注入 HeroService 并调用它的 getHeroes() 方法来获取这个数据模型。在 HeroDetailComponent 中，我们使用共享的数据模型来获取一个 hero 对象，并从中获取 heroName 属性。
结论
在 Angular 中，组件通信是一个完整的话题，本文只是介绍了一些常见的问题和解决方法。通过使用 @Input 和 @Output 装饰器，输入属性绑定，事件绑定，服务以及共享数据模型，我们可以轻松地在不同的组件之间进行通信。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6710ae706fbd6f3cf2f5b3b8