无法设置 BehaviorSubject 的订阅数据

Question

Trying with BehaviorSubject and 2 components. But not able to set the data receiving from subscribe.

Components A

name:string = 'Test';
  constructor( private data: DataService) { }
  ngOnInit() {
    this.data.currentMessage.subscribe(val => this.name = val);
  }

Component B (with text field)

name:string = 'Test';
  frm:FormGroup;
  constructor(private fb: FormBuilder, private data: DataService) { }
  ngOnInit() {
    this.setup();
    this.data.currentMessage.subscribe(val => this.name = val);
  }
  setup(){
    this.frm = this.fb.group({
      name:['']
    });
  }
  setData(){
    this.data.changeMessage(this.frm.get('name').value);
  }

on form submit setData() function is called.

Data Service

private messageSource = new BehaviorSubject('default message');
  currentMessage = this.messageSource.asObservable();
  constructor() { }

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

On load:

On Submit form:

Value is changing in Component B but not in A. Whats wrong in A that its not changing? Please Help.

Answer 1

Your service is not a singleton service. You have to provided it at the module level or at the root level to make it a shared service or a singleton service.

Providing service at the component level will create a new instance which is available only to that component.

You can provide the service at the root level in the following way or from the providers array within the module file.

data.service

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

  private messageSource = new BehaviorSubject('default message');
  currentMessage = this.messageSource.asObservable();
  constructor() { }

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

}

Also remove providers array from component A and B files, since we are providing at the root level

Comp A

@Component({
  selector: 'app-comp-a',
  templateUrl: './comp-a.component.html',
  styleUrls: ['./comp-a.component.css'],
  // providers: [DataService]
})

Comp B

@Component({
  selector: 'app-comp-b',
  templateUrl: './comp-b.component.html',
  styleUrls: ['./comp-b.component.css'],
  // providers: [DataService]
})

Forked Demo