通过 BehaviorSubject Angular 将数组发送到不同的组件

Question

我正在开发一个管理面板，管理员可以在其中查看所有已请求的预订并选择他将接受的预订；我想在不同的选项卡（不同的组件，不同的路线）中显示那些“已接受”的预订。我将 SharedService 与 BehaviorSubject 一起使用，但它不起作用：我在第二个组件中得到的只是一个匿名主题数组，它是空的。我没有显示将预订发送到服务的第一个组件，因为它工作正常。 请帮忙！

shared Service

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


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

export class SharedService{

    private acceptedBookings=[];

    public acceptedBookingsSubject= new BehaviorSubject<Turno[]>([]);
    //public turno:Turno;

    constructor(){ 
    }

addToAccepted(turno : Turno){

    this.acceptedBookings.push(turno);
    this.acceptedBookingsSubject.next(this.acceptedBookings);   
        console.log(this.acceptedBookingsSubject);
}



}

这是第二个组件。

Second component, which consumes the service and has to display the array.

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:Observable<Turno[]>;

          ngOnInit(): void {
  }

  constructor(private _sharedService: SharedService) {

            this._sharedService.acceptedBookingsSubject.pipe(share());

             }



}

并且在第二个组件的 html 中使用异步管道 |

Answer 1

在 ngOnInit 处，只需添加：

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

然后您可以选择是喜欢在其上创建订阅还是使用管道异步。

附加提示，一旦将 SharedService 设置为 { providedIn: 'root' }，就无需将 SharedService 放在任何提供程序数组中。

我创建了一个演示：stackblitz