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 cookbook进行父子沟通，但我的架构会让buttonComponent和promptComponent兄弟姐妹。

在我工作期间，我确实将promptService设置为每个组件中的提供者，并且它们是无关的。在PromptService中提供AppModule解决了问题！

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

2 个答案: