typescript - Angular 5 creează mai multe instanțe ale unui serviciu

Am o aplicație web care afișează 3 dispozitive mobile virtuale în același timp.

Fiecare dispozitiv este format dintr-un mobile_container. Am pus mobile_container în componenta mea rădăcină astfel:

<div>
  <app-mobile-container [fruit]="apple"></app-mobile-container>
  <app-mobile-container [fruit]="orange"></app-mobile-container>
  <app-mobile-container [fruit]="strawberry"></app-mobile-container>
</div>

fruit este un Input care indică containerul ale cărui date trebuie să le acceseze și să le afișeze. Acest lucru funcționează bine

Am creat un serviciu toggleService pentru a comuta între diferitele vizualizări din unul dintre containere, și funcționează foarte bine. Arată astfel:

import { Injectable } from '@angular/core';
@Injectable()
export class ToggleService {
    constructor() {
    }
    tabs: { name: string, visibility: boolean }[] = [
        { "name": "MainView", "visibility": true },
        { "name": "DetailView", "visibility": false },
    ];
    
    changeTab(index: number) {
        //changes View for example to "DetailView"
    }
    goToPrevTab() {
        //changes View for example back to "MainView"
    }
}

Dar dacă lipesc 3 mobile_containers și dau clic, de exemplu, pe componenta DetailView, vizualizarea se schimbă în toate mobile_containers și nu doar în cel pe care l-am clicat. Acest lucru se întâmplă deoarece fiecare container partajează același toggleService între ele.

Cum pot să-i spun mobile-containers să creeze un toggleService 1, toggleService 2, toggleService 3, astfel încât să nu acceseze același toggleView.tabs?

Răspuns #1

Este o întrebare despre unde oferiți serviciul, ceea ce determină unde este instanțiat. Puteți oferi la nivel de componentă. În următorul exemplu, ReportBindingService este instanțiat la nivelul ReportContainer. ReportBindingService este analog cu ToggleServiced-ul dumneavoastră

@Component({
  selector: 'app-report-container',
  templateUrl: './report-container.component.html',
  styleUrls: ['./report-container.component.css'],
  encapsulation: ViewEncapsulation.None,
  providers: [ ReportBindingTreeService ]
})