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

Question

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

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

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

额外的提示，一旦您使用 { providedIn: 'root' } 设置了 SharedService，您就不需要将 SharedService 放在任何提供程序数组上。

我创建了一个演示：stackblitz

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

Send arrays to different component via BehaviorSubject Angular

arrays

subject

rxjs

behaviorsubject

angular