Angular 是一个流行的前端框架，它提供了许多强大的功能，其中包括服务和组件之间的通信。在本文中，我们将深入探讨 Angular 中服务和组件之间的通信机制，并提供一些示例代码和最佳实践。
服务
在 Angular 中，服务是一个可注入的类，它提供了一些公共的功能，比如数据获取、数据处理等等。服务可以在应用程序的任何地方使用，包括组件、指令、管道等等。
注入服务
要使用服务，我们需要将其注入到需要它的组件中。在 Angular 中，有两种注入服务的方法：构造函数注入和属性注入。
构造函数注入是将服务作为参数传递给组件的构造函数：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - --------- - ---- --------------- ------------ --------- ------------------- --------- ------- ------- -------- -- ------ ----- ----------- - ------------------- ---------- ---------- -- ------- - ---------------------------- -展开代码
属性注入是将服务作为属性添加到组件中：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - --------- - ---- --------------- ------------ --------- ------------------- --------- ------- ------- -------- -- ------ ----- ----------- - ------- ---------- ---------- ------------- -- ---------- - -------------- - --- ------------ ------------ - ---------------------------- - -展开代码
我们通常使用构造函数注入，因为它更简洁，更易于测试。
提供服务
要使用服务，我们需要在应用程序的根模块或组件中提供它。在提供服务时，我们需要考虑到服务的作用域。如果我们想在整个应用程序中共享服务，我们应该在根模块中提供它。如果我们只想在某个组件中使用服务，我们应该在该组件中提供它。
在根模块中提供服务：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - --------- - ---- --------------- ------ - ------------ - ---- ------------------ ----------- -------- ---------------- ------------- --------------- ---------- ------------ ---------- -------------- -- ------ ----- --------- --展开代码
在组件中提供服务：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - --------- - ---- --------------- ------------ --------- ------------------- --------- ------- ------- --------- ---------- ----------- -- ------ ----- ----------- --展开代码
示例代码
下面是一个简单的示例，演示了如何使用服务在组件之间共享数据：
-- -------------------- ---- ------- ------ - ---------- - ---- ---------------- ------------- ------ ----- ----------- - ------- ----- -------- - --- ------------- ------- - --------------------- - --------- - ------ ---------- - - ------ - --------- - ---- ---------------- ------ - ----------- - ---- ----------------- ------------ --------- --------------- --------- ------- ----------------------------- --------------------------------- -- ------ ----- ---------------- - -------- ------- ------------------- ------------ ------------ -- --------- - --------------------------------------- ------------ - --- - - ------ - --------- - ---- ---------------- ------ - ----------- - ---- ----------------- ------------ --------- ---------------- --------- -------- ----------- ---- -- ------------------------- ---- ------------- -- ------ ----- ----------------- - ------------------- ------------ ------------ -- -展开代码
在上面的示例中，我们定义了一个名为 DataService 的服务，它包含了一个私有的字符串数组 data，并提供了 addData 和 getData 两个方法。然后，我们定义了两个组件 AddDataComponent 和 ShowDataComponent，它们都注入了 DataService，并使用它来共享数据。
组件之间的通信
在 Angular 中，组件之间的通信可以通过父子组件之间的输入和输出属性、通过服务进行数据共享、通过模板引用变量和 ViewChild 进行组件之间的交互等方式实现。
输入和输出属性
输入属性是从父组件传递到子组件的数据，输出属性是从子组件传递到父组件的数据。
在父组件中定义输入属性：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ------------- --------- ----------- ------------------- --------------------------------------------- -- ------ ----- --------------- - ------- - -------- ------------------ ------- - --------------------- - -展开代码
在子组件中定义输出属性：
-- -------------------- ---- ------- ------ - ---------- ------ ------- ------------ - ---- ---------------- ------------ --------- ------------ --------- -------- -------------------------------------- -- ------ ----- -------------- - -------- -------- ------- --------- --------- - --- ----------------------- ------------- - ---------------------------- ---- -------- - -展开代码
在上面的示例中，我们定义了一个父组件 ParentComponent 和一个子组件 ChildComponent。父组件通过 [message]="message" 将 message 属性传递给子组件，并通过 (onMessage)="onMessage($event)" 监听子组件的输出事件。子组件通过 @Input() message: string; 定义输入属性 message，并通过 @Output() onMessage = new EventEmitter<string>(); 定义输出属性 onMessage，并在 sendMessage() 方法中触发输出事件。
服务
服务可以在组件之间共享数据和方法。我们可以在一个组件中使用服务来更新数据，然后在另一个组件中使用服务来获取更新后的数据。
-- -------------------- ---- ------- ------ - ---------- - ---- ---------------- ------------- ------ ----- ----------- - ------- ----- -------- - --- ------------- ------- - --------------------- - --------- - ------ ---------- - - ------ - --------- - ---- ---------------- ------ - ----------- - ---- ----------------- ------------ --------- --------------- --------- ------- ----------------------------- --------------------------------- -- ------ ----- ---------------- - -------- ------- ------------------- ------------ ------------ -- --------- - --------------------------------------- ------------ - --- - - ------ - --------- - ---- ---------------- ------ - ----------- - ---- ----------------- ------------ --------- ---------------- --------- -------- ----------- ---- -- ------------------------- ---- ------------- -- ------ ----- ----------------- - ------------------- ------------ ------------ -- -展开代码
在上面的示例中，我们定义了一个名为 DataService 的服务，它包含了一个私有的字符串数组 data，并提供了 addData 和 getData 两个方法。然后，我们定义了两个组件 AddDataComponent 和 ShowDataComponent，它们都注入了 DataService，并使用它来共享数据。
模板引用变量和 ViewChild
模板引用变量和 ViewChild 可以在组件之间进行交互。模板引用变量是通过 # 符号定义的变量，可以引用组件或 HTML 元素。ViewChild 是 Angular 的一个装饰器，可以用来获取组件或 HTML 元素的引用。
-- -------------------- ---- ------- ------ - ---------- ---------- ---------- - ---- ---------------- ------------ --------- ------------- --------- -------- ----------------------------------------------------- -------------------- -- ------ ----- --------------- - ------------------- ------ ----------- - ------ - --------- - ---- ---------------- ------------ --------- ------------ --------- -------- -------------------------------------- -- ------ ----- -------------- - ------------- - -------------------- ---- -------- - -展开代码
在上面的示例中，我们定义了一个父组件 ParentComponent 和一个子组件 ChildComponent。父组件使用 @ViewChild('child') child: ElementRef; 获取子组件的引用，并在 sendMessage() 方法中调用子组件的 sendMessage() 方法。
最佳实践
- 使用服务来共享数据和方法。
- 使用输入和输出属性来实现父子组件之间的通信。
- 使用模板引用变量和 ViewChild 来实现组件之间的交互。
- 将服务提供在需要它的组件中，避免在整个应用程序中共享服务。
- 在组件中使用构造函数注入服务，避免使用属性注入。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cc3d3ae46428fe9e5637aa
