具有私有观察者的Angular 2多个组件

Question

我有一个角度2应用程序，在组件调用ComponentB中，多次显示相同的组件，我们称之为ComponentA。这个ComponentA有一个我用来进行调用的相关服务，当这些调用得到答案时，服务发送一个必须从ComponentA捕获的可观察对象。 我需要的是ComponentA编号1必须只捕获初始化为ComponentA编号1的服务流，以便同一更改中的ComponentA 2保持不变。

尝试举例

HTML ComponentB

<componentA *ngFor="let el of list"></componentA>

TYPESCRIPT ComponentB

@Component({
    selector:"componentB",
    templateUrl:"./componentB"
    styleUrls:["./componentB.css"]
})
export class ComponentB implements OnInit{

    ngOnInit(){}

    private list:string[]=['','']
}

HTML ComponentA

<div>{{variable}}</div>
<button (click)="changeVariable()"></button>

打字稿

@Component({
    selector:"componentA",
    templateUrl:"./componentA"
    styleUrls:["./componentA.css"]
})
export class ComponentA implements OnInit{
    constructor(private sA:serviceA){
        sA.callObservable.subscribe(
            arg0=>this.variable=arg0
        )
    }
    private variable:any;
    changeVariable(){
        this.sA.call()
    }
}

服务A

@Injectable()
export class ServiceA {
    private item=new Subject<string>();

    callObservable=this.item.asObservable()

    call(){
        this.getForCall().subscribe(
            arg0=>item.next(arg0)
        )
    }

    getForCall():Observable<string>{
       .... the call and the conversion to json ...
    }
}

此代码有什么问题？我认为这将是组件A的构造函数中的私有并置的解决方案，但它似乎不起作用，一切都在变化。

更新

更准确地说，在示例中我需要：如果我单击组件A内部组件A的第一个元素中的按钮，则不希望在组件B内的第二个组件A中更改“variable”的值。

Answer 1

尝试为每个ComponentA设置ServiceA的提供者，这样就会有多个ServiceA（它不是单例）的实例，它们分别为每个ComponentA提供服务。从模块中的providers数组中删除serviceA。

@Component({
    selector:"componentA",
    templateUrl:"./componentA",
    styleUrls:["./componentA.css"],
    providers: [ serviceA ]
})
export class ComponentA implements OnInit{
    constructor(private sA:serviceA){
        // ...
    }
}