通过 Angular 中的服务发出事件答案

【问题标题】：Emit an event through service in Angular通过 Angular 中的服务发出事件
【发布时间】：2019-06-02 10:33:08
【问题描述】：

通过服务发出事件的正确方法是什么。我读过在服务中声明EventEmmiter 是不合适的。

我想实现以下目标。

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

【问题讨论】：

这个运气好吗？我也处于一种情况，我想从孙子组件向父 AngularJS 应用程序发出事件，我认为服务是避免多级握手的更好方法。

标签： angular5

【解决方案1】：

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

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

孩子到父母：通过 ViewChild 共享数据

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

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

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

您也可以使用常规 RxJS 主题通过服务共享数据，但这就是我更喜欢 BehaviorSubject 的原因。

它总是会在 subscription 上返回当前值 - 无需调用 onnext 它有一个 getValue() 函数来提取最后一个值作为原始数据。它确保组件始终接收最新数据。在服务中，我们创建一个私有的 BehaviorSubject 来保存消息的当前值。我们定义了一个 currentMessage 变量，将这个数据流作为一个 observable 来处理，供组件使用。最后，我们创建函数，调用 BehaviorSubject 上的 next 来更改其值。

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

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

data.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class DataService {

  private messageSource = new BehaviorSubject('default message');
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message)
  }

}

parent.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";

@Component({
  selector: 'app-parent',
  template: `
    {{message}}
  `,
  styleUrls: ['./sibling.component.css']
})
export class ParentComponent implements OnInit {

  message:string;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
  }

}

second.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";

@Component({
  selector: 'app-sibling',
  template: `
    {{message}}
    <button (click)="newMessage()">New Message</button>
  `,
  styleUrls: ['./sibling.component.css']
})
export class SiblingComponent implements OnInit {

  message:string;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
  }

  newMessage() {
    this.data.changeMessage("Hello from Sibling")
  }

}

【讨论】：

我已经尝试过了，但是我怎么知道事件何时触发呢？我想在单击按钮时获取 url，所以我只想在单击组件时获取，您的示例适用于传递值，但是如果我尝试获取 url，我会在组件初始化时得到未定义.
这不是对您评论的回答，而是更一般的评论 - 如果需要在服务中使用 BehaviorSubject，请检查此问题的答案 - stackoverflow.com/questions/57355066/…

【解决方案2】：

当服务提供的数据发生变化时，我使用Replaysubject通知需要更新到gui-component中的gui的数据变化。

服务创建了一个 ReplaySubject 来保存可能更改的数据。
所有 gui 组件/其他服务在其 init 函数中订阅此对象，并在以后收到有关数据更改的通知。 => 做他们需要做的事。

在我的例子中，服务有一个轮询间隔，它持有的数据可能会在没有任何用户操作的情况下发生变化。

【讨论】：