Question

场景：

我有JobService服务，其中

export class JobService {

    private JobIdSubject = new BehaviorSubject('');
    constructor() {}

    public setJobId(jobId: string) {
        this.JobIdSubject.next(jobId);
    }

    public getJobId(): Observable<string> {
        return this.JobIdSubject;
    }
}

现在，我正在尝试subscribe进入控制器ngOnInit中的BehaviorSubject

ngOnInit() {
    this.jobSvc.getJobId().subscribe((jobId) => {
        this.jobId = jobId;
        if (jobId === '') {
            console.log('Hello')
        }
    });
}

我观察到Hello被多次打印，最后我得到

错误RangeError：超出了最大调用堆栈大小

at ZoneDelegate.handleError（zone.js：393）

at Object.onHandleError（core.js：4651）

at ZoneDelegate.handleError（zone.js：395）

在Zone.scheduleTask（zone.js：242）

在Zone.scheduleMacroTask（zone.js：258）

我尝试使用first或take(1)：

this.jobSvc.getJobId().first().subscribe((jobId) => {

我明白了

.getJobId（...）。first不是函数

基本上，我想在加载组件并获得其中的第一个值unsubscribe时BehaviorSubject Job Id。

Answer 1

import { Observable } from "rxjs";
import { first } from "rxjs/operators";

应该是：

this.jobSvc.getJobId().pipe(first()).subscribe();

仅使用BehaviorSubject发出的.first（）值-Angular和RxJS

1 个答案: