以角度使用concatMap？

Question

你能解释一下如何在 getPrices() 和 getDetails() 上使用 concatMap 吗？

   export class HistoricalPricesComponent implements OnInit, OnDestroy {
        private unsubscribe$ = new Subject < void > ();
    
        infoTitle: string = "";
        lines: HistoryPoint[] = [];
    
        model: Currency = new Currency();
        svm: string;
    
        constructor(
            private location: Location,
            private service: HistoricalPricesService,
            private activatedRoute: ActivatedRoute
        ) {}
    
        ngOnInit(): void {
            let svm: string | null;
            svm = this.activatedRoute.snapshot.paramMap.get('svm');
            if (!svm) {
                this.goBack();
                return;
            }
            this.svm = svm;
    
    
            this.getPrices();
            this.getDetails(svm)
        }
    
        ngOnDestroy(): void {
            this.unsubscribe$.next();
            this.unsubscribe$.complete();
        }
    
        getPrices(): void {
            this.service.getInstrumentHistoryEquities(this.svm, this.model).pipe(
                takeUntil(this.unsubscribe$)
            ).subscribe(res => {
                if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
                    if (res.HISTO.POINT.length > 0) {
                        this.lines = res.HISTO.POINT.reverse();
                    }
                }
            });
        }
    
        getDetails(svm: string): void {
            this.service.getInstrumentInfo(svm).pipe(
                takeUntil(this.unsubscribe$)
            ).subscribe(res => {
                if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
                    this.infoTitle += " " + res.ADVTITRE.BASIQUETITRE.LABEL + " (" + res.ADVTITRE.BASIQUETITRE.PLACELABEL + ")";
                }
            });
        }
    
        goBack(): void {
            this.location.back();
        }
    }

我试图查看此页面

https://www.tektutorialshub.com/angular/using-concatmap-in-angular/

但我不知道从哪里开始？

该示例不允许我理解如何创建它？

Answer 1

这里是 concatMap 是一个操作员流，所以你只需要通过创建者流使用它，我为每个操作初始化两个主题 getPrices 和 getDetails。

然后我按照 concatMap 策略执行 AJAX 调用，并将其放入 Observable 中，以便组合或直接用于组件模板。

   export class HistoricalPricesComponent implements OnInit, OnDestroy {
        private unsubscribe$ = new Subject < void > ();
    
        infoTitle: string = "";
        lines: HistoryPoint[] = [];
    
        model: Currency = new Currency();
        svm: string;
    
        // actions
        getPrices$ = new Subject<void>();
        getDetails$ = new Subject<string>();
        
        // states
        prices$: Observable<any>();
        details$: Observable<any>();
        
        constructor(
            private location: Location,
            private service: HistoricalPricesService,
            private activatedRoute: ActivatedRoute
        ) {}
    
        ngOnInit(): void {
            let svm: string | null;
            svm = this.activatedRoute.snapshot.paramMap.get('svm');
            if (!svm) {
                this.goBack();
                return;
            }
            this.svm = svm;
    
            this.prices$ = this.getPrices$.pipe(concatMap(this.getPrices)
            this.details$ = this.getDetails$.pipe(concatMap((svm => this.getDetails(svm))
    
        }
    
        ngOnDestroy(): void {
            this.getPrices$.complete()
            this.getDetails$.complete()
            this.unsubscribe$.complete();
        }
    
        getPrices(): void {
            this.service.getInstrumentHistoryEquities(this.svm, this.model).pipe(
                takeUntil(this.unsubscribe$)
            ).subscribe(res => {
                if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
                    if (res.HISTO.POINT.length > 0) {
                        this.lines = res.HISTO.POINT.reverse();
                    }
                }
            });
        }
    
        getDetails(svm: string): void {
            this.service.getInstrumentInfo(svm).pipe(
                takeUntil(this.unsubscribe$)
            ).subscribe(res => {
                if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
                    this.infoTitle += " " + res.ADVTITRE.BASIQUETITRE.LABEL + " (" + res.ADVTITRE.BASIQUETITRE.PLACELABEL + ")";
                }
            });
        }
    
        goBack(): void {
            this.location.back();
        }
    }