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

Question

我有一个同时显示3个虚拟移动设备的WebApp。

每个设备都包含一个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是一个Inputt，表示容器需要访问和显示哪些数据。 这很好

我创建了一个服务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" } } 

但是，如果我粘贴3个mobile_containers并单击例如DetailView mobile_containers ，它将更改所有mobile_containers的视图，而不仅是单击的视图。 这是因为每个容器彼此共享相同的toggleService 。

如何告诉我的mobile-containers创建toggleService 1 ， toggleService 2 ， toggleService 3 。 这样他们就不会访问相同的toggleView.tabs ？

Answer 1

这是一个问题，您在哪里提供服务，该服务确定了在哪里进行实例化。 您可以在组件级别提供。 在以下示例中，ReportBindingService在ReportContainer级别被实例化。 ReportBindingService与您的ToggleServiced类似

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

Answer 2

这是我对另一个问题的回答： https : //stackoverflow.com/a/46797196/4749297

该解决方案可能对您更好，因为ToggleService独立于任何一个组件或任何逻辑，都可以相应地重复使用。 您所要做的就是使密钥名称唯一。

再次是示例代码：

@Injectable()
export class ToggleService {
    toggleMap: {[uniqueKey: string]: any} = {};

    create(key: string) {
        this.toggleMap[key] = null;
    }

    remove(key: string) {
        delete this.toggleMap[key];
    }

    isShown(key: string): boolean {
        return this.toggleMap[key];
    }

    show(key: string) {
        this.toggleMap[key] = true;
    }

    hide(key: string) {
        this.toggleMap[key] = false;
    }
}

现在，在组件中，您可以利用该服务：

@Component({...})
export class MyComponent implements OnInit, OnDestroy {
    constructor(public toggleService: ToggleService) {}

    ngOnInit() {
        this.toggleService.create('componentOne');
        this.toggleService.create('componentTwo');
        this.toggleService.create('componentThree');
    }

    // Clean up when parent component is destroyed to save memory
    ngOnDestroy() {
        this.toggleService.remove('componentOne');
        this.toggleService.remove('componentTwo');
        this.toggleService.remove('componentThree');
    }
}

在模板中：

<button (click)="toggleService.show('componentOne')">Show component 1</button>
<button (click)="toggleService.show('componentTwo')">Show component 2</button>
<button (click)="toggleService.show('componentThree')">Show component 3</button>

<componentOne *ngIf="toggleService.isShown('componentOne')"></componentOne>
<componentTwo *ngIf="toggleService.isShown('componentTwo')"></componentTwo>
<componentThree *ngIf="toggleService.isShown('componentThree')"></componentThree>