Question

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

我想实现以下目标。

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

Answer 1

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

父级：通过输入共享数据

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

孩子要父母：通过Output（）和EventEmitter共享数据

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

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

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

它将始终在 subscription 上返回当前值-无需调用onnext 它具有getValue（）函数以将最后一个值提取为原始数据。它确保组件始终接收最新数据。在服务中，我们创建一个私有的BehaviorSubject，它将保存消息的当前值。我们将currentMessage变量定义为可观察到的数据流，以供组件使用。最后，我们创建一个函数，在BehaviorSubject上调用next来更改其值。

父，子和同级组件均受到相同的对待。我们将DataService注入构造函数中，然后订阅可观察的currentMessage并将其值设置为与message变量相等。

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

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")
  }

}

Answer 2

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

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

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

通过Angular服务发送事件

2 个答案: