Question

我有一个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"
    }
}

但是，如果我粘贴3 mobile_containers并点击DetailView - 组件，则会更改所有mobile_containers中的视图，而不仅仅是点击的视图。这是因为每个容器彼此共享相同的toggleService。

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

Answer 1

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

类似

＆＃13;

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

＆＃13;

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>

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

2 个答案: