Angular5服务未发送数据？

Question

My code has 2 components, A and B. A has a form with data in it. I want to send the data from the form in component A to component B. But it looks like B isn't getting any data.

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

Component 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 }); } } 

My Service:

 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() { } } 

The console.log("sent") fires in Component A's onChange method, but the console.log(message) never fires in Component B's subscribe codeblock. Any ideas?

Answer 1

You provide MyService (see the providers array in @Component) in each component, so each component has its own instance of the service. Remove providers from component metadata

Answer 2

When I've used BehaviorSubject I've needed to subscribe to the observable and specify async and use await on the response. In component b it would look like this for you:

this.toggleService.currentMessage.subscribe(async(message) => 
{
  this.recievedData = await message;
});