使用 BehaviorSubject 而未获得预期的值

Question

我目前正在全局使用 service 和 BehaviorSubject 在两个组件中共享 BehaviorSubject 属性值... 这是我的服务：

@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);


      }
}

这是 JobsComponent，我正在调用我的服务的 setPartitionKey() 方法，并将一个值作为此组件的参数传递给它：

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));
    }

这是JobsComponent html:

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

这是 JobDetails 组件：

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));
    }

我将 JobsService 全局放入 @NgModule:

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

因此，当我设置服务的 partitionKeySource 值时，我想导航到 JobDetails 组件以使用 partitionKey 值显示该作业的详细信息，我是使用全局服务和 BehaviorSubject 因为我不想在 url...

中显示 partitionKey 值

当它导航到 JobDetails 时，partitionKey 的值是 JobsService 上的默认值，而不是 Job partitionKey 上的默认值。 .. 我正在使用 console.log() 打印两个组件的顺序和 partitionKey 值，我希望它们相同...

这是正在打印的内容：

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

我希望两个组件中的 partitionKey 值相同（01f1f352-51e0-474e-962b-a75a56925342d）...如果在使用 JobsComponent 之前更改此值，为什么 JobDetails 会获得默认值？

Answer 1

从提供的控制台日志输出的顺序来看，您的服务似乎有多个实例。从组件提供程序中删除 JobsService 的所有实例，只将其保留在 AppModule

的提供程序数组中

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

这将使 JobsService 成为一个可以在应用程序中的所有组件之间共享的单例服务。

使用 BehaviorSubject 而未获得预期的值

using BehaviorSubject and not getting the value expected

angular

angular-components

behaviorsubject