如何触发可观察的流，该流被用作异步管？

Question

我有一个上下文，我需要与Angular Group选项卡并行获取数据。打开选项卡时，我希望它以获取数据，显示进程中的加载，显示数据后显示数据，或显示错误（如果有），则全部在HTML上。 触发器

我的组件自由触发该过程。

private queryInboxTriggerObs: BehaviorSubject<any> = new BehaviorSubject('');
queryInboxTrigger$ = this.queryInboxTriggerObs.asObservable();

ngOnInit() {
    const getInbox$ = timer(6e3).pipe(tap(res => console.log(`getInbox$`, res)), map(() => ({ inbox: 1 }))); // fake api
    this.timeout$ = timer(5e3).pipe(take(1), map(() => { throw new Error('timeout!!!') }));
    this.queryInbox$ = concat(
        of({ type: 'start' }),
        of(1).pipe(
            switchMap(() => race(this.timeout$, getInbox$)),
            tap(res => console.log(`race`, res)),
            map(res => ({type: 'finish', value: res}))
        )
    );
    this.inbox$ = this.queryInboxTrigger$.pipe(exhaustMap(() => this.queryInbox$));

    this.initInbox();
}

initInbox() {
    this.queryInboxTriggerObs.next('');
}

onLoadInboxClick() {
    this.initInbox();
}

我希望用 是我的http请求，inbox $是我的异步可观察的，queryInboxTrigger $是我的触发器。

内部initinbox（），我仅调用this.queryinboxtriggerobs.next（'''）;，我希望它每次调用initinbox时都会触发我的获取数据过程（），例如onloadinboxClick。不幸的是，我的触发器仅在ngoninit上首次工作，我无法通过继续执行this.queryinboxtriggerobs.next（'''）来再次触发该过程，通过单击或切换选项卡，我需要在这里提供帮助。例如，当timeout $排放值时，我的html再次显示文本加载数据，onloadinboxClick呼叫，我希望queryinbox $能够再次运行

我的组件.html

<mat-tab-group mat-align-tabs="start" (selectedIndexChange)="selectedIndexChange($event)">
<mat-tab label="Inbox">
    <ng-container *ngIf="inbox$ | withLoading | async as inbox">
        <ng-container *ngIf="inbox.error">
            <p>Data not found. <a (click)="onLoadInboxClick()">Try again</a></p>
        </ng-container>
        <ng-container *ngIf="inbox.value">
            <span>Inbox: {{ inbox.value.inbox }}</span>
        </ng-container>
        <ng-container *ngIf="inbox.loading">
            <p>Loading...</p>
        </ng-container>
    </ng-container>
</mat-tab>
<mat-tab label="Tab 2">Content 2</mat-tab>
<mat-tab label="Tab 3">Content 3</mat-tab>

和我的自定义异步管

transform(value: any): any {
    return isObservable(value)
            ? value.pipe(
                map((val: any) => {
                    return {
                        loading: val.type === 'start',
                        value: val.type ? val.value : val
                    }
                }),
                startWith({ loading: true }),
                catchError(error => of({ loading: false, error }))
            )
            : value;
}

Answer 1

看来我的自定义管道正在引起问题。当我这样更新代码

this.queryInbox$ = concat(
        of({ type: 'start' }),
        of(1).pipe(
            switchMap(() => race(this.timeout$, this.getInbox$)),
            tap(res => console.log(`race`, res)),
            map(res => ({type: 'finish', value: res})),
            catchError(err => of({ type: 'error' }))
        )
    );

并相应地更新我的HTML（删除载荷管）

<mat-tab-group mat-align-tabs="start" (selectedIndexChange)="selectedIndexChange($event)">
<mat-tab label="Hộp thư đến">
    <ng-container *ngIf="inbox$ | async as inbox">
        <ng-container *ngIf="inbox.type === 'error'">
            <p>Data not found. <a (click)="onLoadInboxClick()">Try again</a></p>
        </ng-container>
        <ng-container *ngIf="inbox.type === 'finish'">
            <span>Inbox: {{ inbox.value.inbox }}</span>
        </ng-container>
        <ng-container *ngIf="inbox.type === 'start'">
            <p>Loading...</p>
        </ng-container>
    </ng-container>
</mat-tab>
<mat-tab label="Hộp thư đi">Content 2</mat-tab>
<mat-tab label="Tạo thư mới">Content 3</mat-tab>

时，一切都按预期工作。