Angular передать массив другому (НЕ дочернему) компоненту

Question

Я довольно новичок в Angular и у меня проблемы с передачей массива в другой (не связанный с родителем / дочерним) компонент. В моем приложении я хочу щелкнуть по кнопке, чтобы пометить ее как «принятую», и отобразить этот же массив в другом представлении (представление принятых массивов) , по другому маршруту. Я попытался сделать это с @Input и с общими службами , и это просто не будет работать. Можете ли вы указать мне в правильном направлении? Спасибо.

sharedService.ts //My array is called 'Turno'

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


    @Injectable()

    export class SharedService{


    public turno:Turno;


        constructor(){

        }



setArray(turno){
    this.turno=turno;
}
getArray(){

    return this.turno;
}
}

первый компонент (я отмечаю принятый массив методом accept ()):

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

    public turnos: Turno;
    public status;


  constructor(

    private _turnoService: TurnoService,
    private _sharedService: SharedService

    ) { }

  ngOnInit(): void {

    this._turnoService.getTurnos().subscribe(
        response=>{
            if(response.status== 'success'){
                this.turnos= response.turnos;
                this.status=response.status;
                console.log(this.turnos);
            }else{
                this.status= 'error';
            }

        },error=>{
            console.log('error');
        }

        );

  }

  accept(turno){

    this._sharedService.setArray(turno);
    console.log(turno);


  }

второй компонент (получает и перечисляет принятые массивы)

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

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

        public turnos: Turno;


  constructor(
    private _sharedService: SharedService

    ) { }


  ngOnInit(): void {
    this.turnos=this._sharedService.getArray();
    console.log(this.turnos);
  }



}

Answer 1

Общая служба - в этом случае go.

Служба, которая генерирует массив при каждом добавлении нового элемента:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class ArrayServiceService {
  private acceptedArray = [];
  public acceptedArraySubject = BehaviorSubject<string[]>([]);

  addToAccepted(item: string) {
    this.acceptedArray.push(item);
    this.acceptedArraySubject.next(this.acceptedArray);
  }

  constructor() {}
}

Служба, которая вызывает Служба для добавления элемента (Конечно, вы можете получить свой элемент, зависит от вас, и я уверен, что вы знаете, как передать элемент с событием щелчка, поэтому я не показываю html):

import { Component, OnInit } from '@angular/core';
import { ArrayService } from '../array.service';

@Component({
  selector: 'app-first-component',
  templateUrl: './first-component.component.html',
  styleUrls: ['./first-component.component.scss'],
})
export class FirstComponentComponent implements OnInit {

  private allItemsArray = ['item1', 'item2', 'item3'];

  markAsAccepted(item: string) {
    this.arrayService.addToAccepted(item);
  }

  constructor(private arrayService: ArrayService) {}

  ngOnInit(): void {}
}

И, наконец, второй компонент, который прослушивает изменения внутри службы и показывает принятый массив:

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { ArrayService } from '../array.service';
import { share } from 'rxjs/operators';

@Component({
  selector: 'app-second-component',
  templateUrl: './second-component.component.html',
  styleUrls: ['./second-component.component.scss'],
})
export class SecondComponentComponent implements OnInit {
  private acceptedArray: Observable<string[]>;

  constructor(private arrayService: ArrayService) {
    this.arrayService.acceptedArraySubject.pipe(share());
  }

  ngOnInit(): void {}
}

И потребляет канал в вашем html вашего второго компонента:

<ul>
  <li *ngFor="let item of acceptedArray | async">{{item}}</li>
</ul>

Надеюсь, это помогло вам. Таким образом, у вас есть сервис, который содержит нужный вам массив, компонент, который его меняет, и другой, который его слушает. Но у вас может быть много компонентов, слушающих или изменяющих его ..

Answer 2

В Angular.

    1. Using Input & Output for passing data to & from child component. 
       Also you can use ViewChild reference to access data (functions & 
       variables) of child component in parent component.
    2. A shared common service having setter & getter methods. 
       You can use it to set data. It acts as a temporary state.
    3. Using Browser storage in the form of session storage , local storage 
       or cookie. You can create one service which stores & takes in data 
       from browser storage & access it across components.

существует в основном три способа передачи данных.