Угловой 2 многокомпонентный компонент с частным наблюдателем

Question

У меня есть приложение с угловым 2, которое в компоненте ComponentB отображает несколько раз тот же компонент, который мы называем ComponentA. Этот компонент ComponentA имел связанную службу, которую я использую для совершения вызовов, и когда эти вызовы получают ответ, служба отправляет наблюдаемый объект, который должен быть уловлен из ComponentA. Что мне нужно, так это то, что ComponentA номер 1 должен поймать только поток службы, инициализированный в ComponentA номер 1, так что ComponentA 2 в том же изменении останется прежним.

Попробуйте сделать пример

HTML ComponentB

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

машинопись 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() 
    } 
} 

Сервис А

@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 ... 
    } 
} 

Что плохого в этом коде? Я думал, что это будет решение с закрытым apposition в конструкторе компонента A, но оно, похоже, не работает, и все меняется.

UPDATE

Чтобы быть более точным, в примере мне нужно, что: если я нажимаю кнопку в первом элементе компонента А внутри компонента BI не хочу значения «переменной» быть изменен во втором компонент A внутри компонента B.

Answer 1

Попробуйте установить поставщика ServiceA для каждого компонента ComponentA, так что будет несколько экземпляров ServiceA (он не является одиночным), который отдельно обслуживает каждый ComponentA. Удалите службу A из массива поставщиков в вашем модуле.

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