angular - Angular 5创建一项服务的多个实例

我有一个webapp同时显示3个虚拟移动设备。
每个设备由mobile_container组成。
我将mobile_container放入根组件中，如下所示：

<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是一个输入，表示他需要访问和显示哪些数据的容器。这行得通
我创建了一个服务toggleService来切换容器中的不同视图这也很好。
看起来是这样的：

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"
    }
}

但是如果我粘贴3mobile_containers并单击例如DetailView-组件，它将更改所有mobile_containers中的视图，而不仅仅是单击的视图。这是因为每个容器彼此共享相同的toggleService。
我怎样才能告诉我的mobile-containers创建一个toggleService 1，toggleService 2，toggleService 3。所以他们不能访问相同的toggleView.tabs？

最佳答案

这是一个问题，你在哪里提供服务，这决定了它在哪里被实例化。您可以在组件级别提供。在下面的示例中，reportbindingservice在reportcontainer级别实例化。ReportBindingService与您的ToggleService

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