javascript - Angular5 服务不发送数据？

Question

我的代码有 2 个组件，A 和 B。A 有一个包含数据的表单。我想将数据从组件 A 中的表单发送到组件 B。但看起来 B 没有收到任何数据。

组件 A:

import { MyService } from 'path/myService.service';
@Component({
  //blah blah
  providers: [MyService]
})
export class ComponentA implements OnInit {

  //my form data

  constructor(private myServ: MyService) {}

  ngOnInit() {
  }

  onChange(event) {
    const data = event.target.value;
    this.myServ.changeMessage(data);
    console.log("sent");
  }
}

组件 B:

import { Component, OnInit } from '@angular/core';
import { MyService } from 'path/myService.service';

@Component({
  // blah blah
  providers: [MyService]
})
export class ComponentB implements OnInit {

  recievedData = null;

  constructor(private myServ: MyService) {} 

  // i tried putting this in constructor instead, but it still didn't work
  ngOnInit() {
    this.myServ.currentMessage.subscribe(message => {
      console.log(message);
      this.recievedData = message
    });
  }
}

我的服务:

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

@Injectable({
  providedIn: 'root'
})
export class MyService {

  private messageSource = new BehaviorSubject(0);
  currentMessage = this.messageSource.asObservable();

  changeMessage(message) {
    this.messageSource.next(message);
  }

  constructor() { }
}

console.log("sent") 在组件 A 的 onChange 方法中触发，但 console.log(message) 从不在组件 B 的订阅代码块中触发。有什么想法吗？

Answer 1

您在每个组件中提供 MyService(请参阅@Component 中的提供程序数组)，因此每个组件都有自己的服务实例。从组件元数据中删除提供者