Angular 中跨组件通信-JavaScript中文网-JavaScript教程资源分享门户

Angular 中跨组件通信

在 Angular 开发中，我们经常需要多个组件之间进行通信，比如向兄弟组件传递数据、处理父组件传递的数据等等。这篇文章将介绍 Angular 中跨组件通信的方法，包含父子组件和兄弟组件之间的通信，并提供示例代码。

父子组件之间的通信

父组件向子组件传递数据是很常见的场景，我们可以使用 @Input 装饰器实现。下面是一个示例：

在父组件中：

------ - --------- - ---- ----------------

------------
  --------- ---------
  --------- -
    ------ ----------------------------------
  -
--
------ ----- --------------- -
  ------------- - -------- ---- --------
-

在子组件中：

------ - ---------- ----- - ---- ----------------

------------
  --------- --------
  --------- -
    ----- ------- ------
  -
--
------ ----- -------------- -
  -------- -------- -------
-

这里我们定义了一个 ParentComponent 和一个 ChildComponent，父组件将 parentMessage 通过 @Input 装饰器绑定到 ChildComponent 实例中的 message 属性上。在子组件中，我们可以直接访问 message 属性显示数据。

当然，我们还可以使用模板语法中的 [] 实现绑定：

------ ----------------------------------

这样 ParentComponent 实例的 parentMessage 属性的值就会传递给子组件实例的 message 属性。

除了 @Input 装饰器，还可以使用 ViewChild 等属性获取子组件实例进行交互。

兄弟组件之间的通信

在 Angular 中，兄弟组件之间的通信需要一个中间件进行协调。我们可以使用 @Output 装饰器和 EventEmitter 来实现。

在兄弟组件中定义一个 SharedService：

------ - ----------- ------------ - ---- ----------------

-------------
  ----------- ------
--
------ ----- ------------- -
  ------- ------------- - --- -----------------------
  -------- - ----------------------------------

  -------------------- ------- -
    ---------------------------------
  -
-

在 SharedService 中我们定义了一个 message$ 的可观察对象和一个 sendMessage 方法。当兄弟组件中需要发送数据时，可以调用 sendMessage 方法来触发事件，而其他组件中就可以监听这个事件并做出相应的处理。

在兄弟组件中使用 SharedService 来进行通信，示例：

Sibling1Component：

------ - --------- - ---- ----------------
------ - ------------- - ---- --------------------

------------
  --------- ---------------
  --------- -
    ------ ------------------------------------------
  -
--
------ ----- ----------------- -
  ------------------- -------------- -------------- --

  ------------------- ------- -
    ----------------------------------------
  -
-

Sibling2Component：

------ - --------- - ---- ----------------
------ - ------------- - ---- --------------------

------------
  --------- ---------------
  --------- -
    ----- ------- ------
  -
--
------ ----- ----------------- -
  -------- -------

  ------------------- -------------- -------------- --

  ---------- -
    ----------------------------------------- -- ------------- - ------
  -
-

在 Sibling1Component 中我们注入了 SharedService 服务，并通过 setMessage 方法将输入的字符串发送到中间件，触发事件。在 Sibling2Component 中，我们订阅了 SharedService 的 message$ 可观察对象，当事件触发时，调用回调函数来更新显示的数据。

总结

通过本文，我们了解了在 Angular 中跨组件通信的两种方式，并提供了示例代码。在实际开发中，我们需要根据不同的场景选择合适的方式来实现业务需求。希望本文能对你有所帮助。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/647101f0968c7c53b0f017be