BehaviorSubject 不会在不同的路径中更新

Question

我是 Angular 的新手，在将数组传递给 不同路径 上的另一个（与 parent/child 无关）的组件时遇到了问题。我想要在我的应用程序中单击一个按钮将预订标记为 'accepted'，并在不同的视图中显示相同的已接受预订数组（更改路线）。

我试过实现 BehaviorSubject 但它不起作用。我可以成功设置数组，但是当我想通过在第二个组件中订阅它来检索它时，它只显示主题的初始值，在本例中为 'Hello World'。请帮助我，我已经尝试了一个星期，观看 youtube 视频和谷歌搜索，但我找不到问题所在。 PD：如果有人想知道，我还没有在 app.component.ts 中添加 sharedService 作为提供者。

First component
import { Component, OnInit } from '@angular/core';
import {SharedService} from '../../services/shared.service';
import {share} from 'rxjs/operators';

@Component({
  selector: 'app-turnos',
  templateUrl: './turnos.component.html',
  styleUrls: ['./turnos.component.css'],
  providers:[TurnoService]
})
export class TurnosComponent implements OnInit {

    public turnos: Turno;
    public status;


  constructor(

    private _sharedService: SharedService

    ) { }


  acceptBooking(booking){

    this._sharedService.addToAccepted(booking);

    this._sharedService.acceptedBookingsSubject.pipe(share()).subscribe(res=>console.log(res));
//this is just to watch the response, which shows the correct array, but it works only in this component
}

}

现在，共享服务

import {Injectable} from '@angular/core';
import {BehaviorSubject} from 'rxjs';
import {Turno} from '../models/turno';
import {Observable} from 'rxjs';


@Injectable({
  providedIn: 'root',
})

export class SharedService{

    private acceptedBookings=[];

    public acceptedBookingsSubject= new BehaviorSubject<any[]>(['Hello World']);



    constructor(){ 
    }

addToAccepted(turno : Turno){

    this.acceptedBookings.push(turno);
    this.acceptedBookingsSubject.next(this.acceptedBookings);   


 }




}

最后是第二个组件，它必须显示所有已接受的预订。我已经使用了 pipe(share()) using async pipe 和 subscribe() 选项来查看是否有效，但是当我调用 console.log 时，两者都只显示 'Hello World'。

import { Component, OnInit} from '@angular/core';
import {SharedService} from '../../services/shared.service';
import {Observable} from 'rxjs';
import {Turno} from '../../models/turno';
import {share} from 'rxjs/operators';

@Component({
  selector: 'app-turnoaceptado',
  templateUrl: './turnoaceptado.component.html',
  styleUrls: ['./turnoaceptado.component.css'],
  providers:[SharedService]
})
export class TurnoaceptadoComponent implements OnInit {

        public acceptedBookings;
        public array:Observable<any[]>;
        public test;

          ngOnInit(): void {

            this.array = this._sharedService.acceptedBookingsSubject.asObservable();

            this.array.subscribe(response=>this.acceptedBookings=response);

            this.test=this.array.pipe(share());

            console.log(this.test);
            console.log(this.acceptedBookings);
  }

  constructor(private _sharedService: SharedService) { }

}

Answer 1

您的 TurnosComponent 和 SharedService 中的代码看起来是正确的。

但是在您的 TurnoaceptadoComponent 中，您的 'console.logs' 在 RXJS 流之外。您应该 console.log 在您的订阅中，例如：

this.array.subscribe(response=> console.log(response));

然后您应该能够看到流中的所有值。

Answer 2

First of all, since you're providing the service in the root (provideIn: 'root') you need to remove it from the providers array from your components and any other module if it's provided there.

当使用主题在组件之间传递数据时，您必须记住，您通过主题的 next 方法从组件将数据作为有效负载发送，但对于 'reading' 数据，您必须像在第二个组件中所做的那样，以主题为源（asObservable() 方法）创建一个新的可观察对象。

为您服务：

@Injectable({
  providedIn: 'root',
})
export class SharedService{
    private acceptedBookingsSubject= new BehaviorSubject<any[]>(['Hello World']);
    public bookingListener$ = this.acceptedBookingsSubject.asObservable();

    constructor(){ }

    addToAccepted(turno : Turno){
    this.acceptedBookingsSubject.next(turno);   
  }
}

在您的第一个组件中：

 acceptBooking(booking) {
   this._sharedService.addToAccepted(booking);  

   // you should move this in the OnInit life cycle hook but you need to remove the take operator or to increase the value
   this._sharedService.bookingListener$
    .pipe(take(1))
    .subscribe(console.log);
}

在你的第二个组件中：

public acceptedBookings$: Observable<any[]>;

  ngOnInit(): void {
    this.acceptedBookings$ = this._sharedService.bookingListener$;

    this.acceptedBookings$.subscribe(console.log);
  }

我创建了 this stackBlitz 来给你举个例子。希望对你有帮助。

Tip: Use the async pipe for displaying your data and use tap operator for side effects instead of manually subscribing in the component.

BehaviorSubject 不会在不同的路径中更新

BehaviorSubject wont update in different route

subscription

observable

rxjs

behaviorsubject

angular