2017-12-29 15 views
0

erwartete ich ein service global und BehaviorSubject mit für jetzt den BehaviorSubject Eigenschaftswert in zwei Komponenten zu teilen ... Das ist mein Service:BehaviorSubject verwenden und nicht der Wert immer

@Injectable() 
export class JobsService { 
private partitionKeySource = new BehaviorSubject("not retrieved yet"); 

    partitionKey$ = this.partitionKeySource.asObservable(); 

    constructor(private _http: Http) { 

    } 

    getJobs(): Observable<Job[]> { 
    return this._http.get(this._jobsUrl).map((response: Response) => <Job>response.json()) 
    .catch(this.handleError); 
    } 

    setPartitionKey(partitionKey: string) { 
     this.partitionKeySource.next(partitionKey); 


     } 
} 

Dies ist JobsComponent, ich bin die setPartitionKey() Methode meines Dienstes aufrufen und einen Wert als Parameter aus dieser Komponente vorbei:

export class JobsComponent implements OnInit { 
ngOnInit(): void { 
this._jobsService.getJobs().subscribe((data: Job[]) => {//...some code})}; 
constructor(private _jobsService: JobsService, private router: Router) {} 
select(partitionKey: string) { 
     this._jobsService.setPartitionKey(partitionKey); 
     this._jobsService.partitionKey$.subscribe(response => { 
      console.log('from jobs component the partitionKey value is: ' + response); 
      console.log('after getting the response jobsComponent'); 
      this.router.navigateByUrl('/app/job_details'); 
     }, error => console.log('there was an error: ' + error)); 
    } 

Dies ist JobsComponent html:

<div class="jobContainer" *ngIf="isThereAnyJob === true"> 
    <div *ngFor="let job of jobs"> 
     <a (click)="select(job.PartitionKey)">{{job.Title}}</a> 
    </div> 
</div> 

Und das ist die Jobdetails Komponente:

export class JobDetailsComponent{ 
constructor(private _jobsService: JobsService) { 
     console.log('constructor called from JobDetails'); 
     this._jobsService.partitionKey$.subscribe(response => { 
       console.log('from job details Component the partitionKey value is: ' + response); 
      }, 
      error => console.log('there was an error from job details component: ' + error)); 
    } 

ich die JobsService globaly im @NgModule bin setzen:

@NgModule({ 
    imports://.... 
    declarations://.... 
    bootstrap: [AppComponent], 
    providers: [Globals, JobsService, MissionService] 
}) 
export class AppModule {} 

Also, wenn ich meine den partitionKeySource Wert gesetzt Service Ich möchte zur JobDetails Komponente navigieren, um die Details dieses Jobs anzuzeigen, die den Wert partitionKey verwenden, verwende ich global servic e und BehaviorSubject denn ich will in der URL die partitionKey Wert nicht angezeigt ...

Wenn es den Wert von partitionKeyJobDetails navigiert ist der Standard ein Satz auf dem JobsService anstelle des JobpartitionKey insbesondere .. . ich console.log() drucken die Reihenfolge und den PartitionKey Wert der beiden Komponenten, die ich sein möchte das gleiche ...

Dies ist, was gedruckt bin mit wird:

from jobs component the partitionKey value is: 01f1f352-51e0-474e-962b-a75a56925342d 
after getting the response jobsComponent 
constructor called from JobDetails 
from job details Component the partitionKey value is: not retrieved yet 

Ich möchte, dass der partitionKey-Wert in beiden Komponenten gleich ist (01f1f352-51e0-474e-962b-a75a56925342d) ... Warum erhält JobDetails den Standardwert, wenn dies vor der Verwendung von JobsComponent geändert wird?

+1

Fügen Sie den Anbietern Ihrer Komponente 'JobsService' hinzu? Oder nur zu den Providern von AppModule – LLai

+0

@LLai Nur zu den Providern von AppModule ... – AlexGH

+0

Von der Reihenfolge Ihrer Konsolenprotokollausgabe scheint es, dass es mehrere Instanzen von JobsService gibt, aber wenn es nur in AppModule bereitgestellt wird, sollte es nicht Sein. Sie könnten versuchen, den '.subscribe' in Ihrer JobDetails-Komponente vom Konstruktor in den ngOnInit zu verschieben. – LLai

Antwort

1

Aus der Reihenfolge der bereitgestellten Konsolenprotokollausgaben sieht es so aus, als ob mehrere Instanzen Ihres Dienstes vorhanden sind. Entfernen Sie alle Instanzen der JobsService von Ihrem Komponentenanbieter und es nur halten in dem Provider-Array Ihres AppModule

@Component({ 
    providers: [ JobsService ] // remove this 
}) 

Dies wird JobsService einen Singleton-Dienst machen, die für alle Komponenten in der Anwendung gemeinsam genutzt werden kann.

Verwandte Themen