订阅的角度限制发射
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了订阅的角度限制发射相关的知识,希望对你有一定的参考价值。
我正在尝试限制订阅的发射:
我的对象首选项可以随时更改。 API请求仅应在x更改后第一次运行。我添加了distinctUntilChanged,但API请求仅在初始化时触发,而当我触发changeY或changeX时,没有任何请求运行,并且console.log显示相同的prev.x和current.x值。当我删除distinctUntilChanged时,每当我更改changeX()或changeY()]时,就会触发api请求
test.page.ts:
import {Component, OnDestroy, OnInit} from '@angular/core'; import {AuthService} from '../_auth/auth.service'; import {AppService} from '../_app/app.service'; import {User, UserProfileService} from '../../api'; import {Preferences} from '../_interfaces/preferences'; import { Subject} from 'rxjs'; import {tap, takeUntil, switchMap, take, distinctUntilChanged} from 'rxjs/operators'; @Component({ selector: 'app-test', templateUrl: './test.page.html', styleUrls: ['./test.page.scss'], }) export class TestPage implements OnInit, OnDestroy { public menu: any; private user: User; public preferences: Preferences; private readonly destroy$: Subject<void> = new Subject(); private i = 1; constructor(public appService: AppService, public authService: AuthService, public userProfile: UserProfileService) { this.authService.currentUser .pipe( take(1), tap((user: User) => this.user = user), switchMap(() => this.appService.currentPreferences.pipe( distinctUntilChanged((prev, current) => { console.log(prev.x, current.x) return prev.x === current.x; }), tap((preferences: Preferences) => this.preferences = preferences), takeUntil(this.destroy$))), // fire Api request switchMap(() => this.userProfile.getMenu(this.user.id, this.preferences.x).pipe(take(1), takeUntil(this.destroy$))), takeUntil(this.destroy$) ) .subscribe(res => { this.menu = res; alert('Request API done'); }); } // used in html on button (click)="changeX()" changeX() { const copyPreferences: Preferences = this.preferences; copyPreferences.x = new Date(); this.appService.setPreferences(copyPreferences); } // used in html on button (click)="changeY()" changeY() { const copyPreferences: Preferences = this.preferences; copyPreferences.y = new Date(); this.appService.setPreferences(copyPreferences); } ngOnInit() { } ngOnDestroy(): void { this.destroy$.next(); this.destroy$.complete(); } }
preferences.ts:
export interface Preferences { appToken?: string; shiftId?: number; restaurantId?: number; restaurants?: any; x?: any; y?: any; }
app.service.ts
import {Injectable} from '@angular/core';
import {Storage} from '@ionic/storage';
import {Observable, ReplaySubject} from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AppService {
public currentPreferences: Observable<any>;
public prefernecesState = new ReplaySubject<any>(1);
constructor(private storage: Storage) {
this.currentPreferences = this.prefernecesState.asObservable();
this.setPreferencesState();
}
async setPreferencesState() {
this.storage.get('preferences').then(res => {
if (res) {
this.prefernecesState.next(res);
}
});
}
public setPreferences(preferences) {
this.storage.remove('preferences');
this.storage.set('preferences', preferences);
this.prefernecesState.next(preferences);
}
}
我正在尝试限制订阅的发出:我的对象首选项可以随时更改。 API请求仅应在x更改后第一次运行。我添加了distinctUntilChanged,...
答案
此
以上是关于订阅的角度限制发射的主要内容,如果未能解决你的问题,请参考以下文章