Question

我想在组件使用服务之间共享数据。但是它没有按预期工作。

组件

let myNum = 1;
sendChanges(myNum) {
    this.breadService.sendData$.next(myNum);
}

服务

public sendData$: Subject<any> = new Subject();
public setValue$: BehaviorSubject<any> = new BehaviorSubject(this.data);

兄弟姐妹

ngOnInit() {
    this.breadService.sendData$.subscribe(() => {
        this.breadService.setValue$.subscribe(data=>{
            this.id = data
            console.log(this.id);
        });
    });
}

Answer 1

sendData$是主题。在发出新值之前，不会执行对主题的订阅回调。因此，内部订阅要等到新值被推送到sendData$后才能执行。您也可以将外部可观察项更改为BehaviorSubject，以立即在订阅中分配值。

服务

private sendDataSource: BehaviorSubject<any> = new BehaviorSubject(null);
private setValueSource: BehaviorSubject<any> = new BehaviorSubject(this.data);

public set sendData(data) {
  this.sendDataSource.next(data);
}

public set setValue(value) {
  this.setValueSource.next(value);
}

public get sendData() {
  return this.sendDataSource.asObservable();
}

public get setValue() {
  return this.setValueSource.asObservable();
}

订阅中的订阅也不是很优雅。用管道输送外部可观察到的东西。

同级组件

import { pipe } from 'rxjs';
import { switchMap } from 'rxjs/operators';

ngOnInit() {
  this.breadService.sendData.pipe(switchMap(() => this.breadService.setValue))
    .subscribe(data => {
      this.id = data
      console.log(this.id);
    });
}

Answer 2

好像您有多余的变量和订阅

组件

let myNum = 1;
sendChanges(myNum) {
    this.breadService.data$.next(myNum);
}

服务

public data$: BehaviorSubject<any> = new BehaviorSubject(this.data);

同级组件

ngOnInit() {
    this.breadService.data$.subscribe((data) => {
        this.id = data
        console.log(this.id);
    });
}

在组件之间共享数据

2 个答案: