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>