在组件之间共享数据

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$ 是一个主题。对 Subject 的订阅回调在发出新值之前不会执行。因此，在订阅后将新值推送到sendData$ 之前，不会执行内部订阅。您也可以将外部 observable 更改为 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();
}

订阅中的订阅也不优雅。管道外部 observable。

兄弟组件

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