通过 Angular 中的服务发出事件

Question

通过服务发出事件的正确方法是什么？我已经读到声明EventEmitter在服务中它不适合。

我想实现以下目标。

我的根组件中有 2 个组件，当我单击第一个组件时，我想知道第一个组件在第二个组件中被单击。

Answer 1

您可以在四种可能的情况下共享数据，但这取决于您的要求

\n\n

父对子：通过输入共享数据

\n\n

子级到父级：通过 ViewChild 共享数据

\n\n

子级到父级：通过 Output() 和 EventEmitter 共享数据

\n\n

不相关的组件：与服务共享数据

\n\n

当在缺乏直接连接的组件（例如兄弟、孙子等）之间传递数据时，您应该使用共享服务。当您拥有应该保持同步的数据时，我发现RxJS BehaviourSubject 在这种情况下非常有用。

\n\n

您还可以使用常规 RxJS 主题通过服务共享数据，但这里\xe2\x80\x99s 为什么我更喜欢BehaviourSubject 。

\n\n

它将始终返回订阅时的当前值- 无需调用 onnext\n它有一个 getValue() 函数来提取最后一个值作为原始数据。\n它确保组件始终接收最新的数据。\n在服务中，我们创建一个私有的BehaviorSubject来保存消息的当前值。我们定义一个 currentMessage 变量，将此数据流处理为将由组件使用的可观察对象。最后，我们创建调用BehaviorSubject 上的 next 来更改其值的函数。

\n\n

父组件、子组件和兄弟组件都接受相同的处理。我们在构造函数中注入 DataService，然后订阅 currentMessage observable 并将其值设置为等于 message 变量。

\n\n

现在，如果我们在这些组件中的任何一个中创建一个函数来更改消息的值。当执行此函数时，新数据会自动广播到所有其他组件。\n这是一个代码片段。

\n\n

数据服务.ts

\n\n

import { Injectable } from \'@angular/core\';\nimport { BehaviorSubject } from \'rxjs\';\n\n@Injectable()\nexport class DataService {\n\n  private messageSource = new BehaviorSubject(\'default message\');\n  currentMessage = this.messageSource.asObservable();\n\n  constructor() { }\n\n  changeMessage(message: string) {\n    this.messageSource.next(message)\n  }\n\n}\n

\n\n

父组件.ts

\n\n

import { Component, OnInit } from \'@angular/core\';\nimport { DataService } from "../data.service";\n\n@Component({\n  selector: \'app-parent\',\n  template: `\n    {{message}}\n  `,\n  styleUrls: [\'./sibling.component.css\']\n})\nexport class ParentComponent implements OnInit {\n\n  message:string;\n\n  constructor(private data: DataService) { }\n\n  ngOnInit() {\n    this.data.currentMessage.subscribe(message => this.message = message)\n  }\n\n}\n

\n\n

第二个组件.ts

\n\n

import { Component, OnInit } from \'@angular/core\';\nimport { DataService } from "../data.service";\n\n@Component({\n  selector: \'app-sibling\',\n  template: `\n    {{message}}\n    <button (click)="newMessage()">New Message</button>\n  `,\n  styleUrls: [\'./sibling.component.css\']\n})\nexport class SiblingComponent implements OnInit {\n\n  message:string;\n\n  constructor(private data: DataService) { }\n\n  ngOnInit() {\n    this.data.currentMessage.subscribe(message => this.message = message)\n  }\n\n  newMessage() {\n    this.data.changeMessage("Hello from Sibling")\n  }\n\n}\n

\n