[英]Angular 5 create multiple Instances of one Service
I have a WebApp showing 3 virtual mobile devices at the same time. 我有一个同时显示3个虚拟移动设备的WebApp。
Each device consists of a mobile_container
. 每个设备都包含一个
mobile_container
。 I put my mobile_container
in my root-component like this: 我将我的
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
is an Inputt which says the container which data he needs to access and display.
fruit
是一个Inputt,表示容器需要访问和显示哪些数据。
This works fine
I created a Service toggleService
to toggle the different Views in on of the Containers this works great too. 我创建了一个服务
toggleService
来切换容器中不同的视图,这也很好用。 It looks like this: 看起来像这样:
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" } }
But if i paste 3 mobile_containers
and click for example the DetailView
-Component it changes the View in all mobile_containers
and not only in the clicked one. 但是,如果我粘贴3个
mobile_containers
并单击例如DetailView
mobile_containers
,它将更改所有mobile_containers
的视图,而不仅是单击的视图。 This is because every container shares the same toggleService
with each other. 这是因为每个容器彼此共享相同的
toggleService
。
How can i tell my mobile-containers
to create a toggleService 1
, toggleService 2
, toggleService 3
. 如何告诉我的
mobile-containers
创建toggleService 1
, toggleService 2
, toggleService 3
。 So that they don´t access the same toggleView.tabs
? 这样他们就不会访问相同的
toggleView.tabs
?
It's a question where do you PROVIDE the service, which determines where it is instanced. 这是一个问题,您在哪里提供服务,该服务确定了在哪里进行实例化。 You can provide at a component level.
您可以在组件级别提供。 In the following example, ReportBindingService is instanced at the ReportContainer level.
在以下示例中,ReportBindingService在ReportContainer级别被实例化。 The ReportBindingService is analagous to your ToggleServiced
ReportBindingService与您的ToggleServiced类似
@Component({ selector: 'app-report-container', templateUrl: './report-container.component.html', styleUrls: ['./report-container.component.css'], encapsulation: ViewEncapsulation.None, providers: [ ReportBindingTreeService ] })
Here is my answer from another question: https://stackoverflow.com/a/46797196/4749297 这是我对另一个问题的回答: https : //stackoverflow.com/a/46797196/4749297
That solution may work better for you as the ToggleService
is independent of any one component or piece of logic and can be re-used accordingly. 该解决方案可能对您更好,因为
ToggleService
独立于任何一个组件或任何逻辑,都可以相应地重复使用。 All you have to do is make your key names unique. 您所要做的就是使密钥名称唯一。
Here is the example code again: 再次是示例代码:
@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;
}
}
Now in your component, you can leverage the service: 现在,在组件中,您可以利用该服务:
@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');
}
}
In the template: 在模板中:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.