使组件侦听服务中的更新数据

Question

我正在尝试创建一种服务，以将数据从祖父母传递给其祖子女，并且我想在数据具有特定值时调用一个方法。 我找到了一些有趣的资源，但是我缺少一些要点。

这是我的服务：

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

@Injectable()
export class PromptService {
  private messageSource: Subject<any>;
  messageSource$: Observable<any>;

  constructor() {
    this.messageSource = new Subject();
    this.messageSource$ = this.messageSource.asObservable();
  }

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

这是更改messageSource值的组件的摘录

@Component({
  selector: 'button',
  templateUrl: './button.html',
  styleUrls: ['./button.scss'],
  providers: [PromptService]
})
export class ButtonComponent implements OnInit, OnDestroy {
  @Input() module: ButtonModule;
  message: string;

  constructor(private promptService: PromptService) {
  }

  onClick(event, redirectLink?: string) {
    if (promptList) {
      …
    } else if (this.module.action === 'Cancel') {
      this.promptService.changeMessage("Hello from Sibling")
    } else {
      …
    }
  }
}

最后是要在可观察值更改时触发closePopup()方法的组件的摘录：

import { Component, Input, ViewChild, OnDestroy, OnInit, AfterViewInit, OnChanges } from '@angular/core';
import { PromptService } from './prompt.service';
import { forEach } from 'lodash';

@Component({
  selector: 'prompt',
  templateUrl: './prompt.html',
  styleUrls: ['./prompt.scss'],
  providers: [PromptService]
})
export class PromptComponent implements OnInit, AfterViewInit {
  message$: Observable<string>;

  constructor(private promptService: PromptService) {
    promptService.messageSource$.subscribe((message) => { this.message$ = message; });
  }

  closePopup() {
    const modalFirstChild = this.modalElement.getElementsByTagName('div')[0];
    this.modalElement.removeChild(modalFirstChild);
    this.removeBackground()
  }

  removeBackground() {
    if (!this.modalElement.getElementsByClassName('prompt_container').length) {
      this.modalElement.parentNode.removeChild(this.modalElement);
    }
  }
}

任何帮助表示赞赏！

-更新

这是button.html

<button (click)="onClick($event, module.link)">
  {{module.text}}
</button>

Answer 1

我不确定我是否理解您要完成的工作。 但是根据您的问题，您希望“当可观察的值发生变化时触发closePopup（）方法”。 如果是这种情况，则应将PromptComponent的构造函数更改为以下内容：

constructor(private promptService: PromptService) {
    promptService.messageSource$.subscribe((message) => { 
        this.message$ = message;
        this.closePopup();
    });
}

Answer 2

我解决了这个问题，事实证明我正在遵循Angular食谱通过服务进行父子通信，但是我的体系结构使buttonComponent和promptComponent同级对象。

在工作时，确实在每个组件中将我的promptService设置为提供程序，它们是无关的。 在PromptService中提供AppModule解决此问题！