时间戳

首页 > 解决方案 > Angular5服务不发送数据？

javascript - Angular5服务不发送数据？

问题描述

我的代码有 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 的订阅代码块中触发。有任何想法吗？

标签： javascriptangulartypescriptservicerxjs

解决方案

您在每个组件中提供 MyService（参见 @Component 中的 providers 数组），因此每个组件都有自己的服务实例。从组件元数据中删除提供程序

推荐阅读