Отправка массивов в другой компонент через BehaviorSubject Angular - PullRequest
Новая
       111

Отправка массивов в другой компонент через BehaviorSubject Angular

0 голосов
/ 22 апреля 2020

я разрабатываю панель администратора, где администратор может видеть все запрошенные заказы и выбирать тех, кого он примет; и я хочу отобразить эти «принятые» заказы на другой вкладке (другой компонент, на другом маршруте). Я использую 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 2-го компонента я использую асин c pipe |

1 Ответ

0 голосов
/ 22 апреля 2020

В ngOnInit просто добавьте: 

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

Затем вы можете выбрать, хотите ли вы создать для него подписку или использовать трубу asyn c.

Дополнительный совет, как только вы установите SharedService с { providedIn: 'root' }, вам не нужно помещать SharedService в любой массив провайдеров.

Я создал демонстрацию: stackblitz

...