Angular 異步管道重新訂閱

Question

我對 Angular 異步管道的理解是在 HTML 模板中為你訂閱一個公開的 Observable。 例如

成分

export class TestComponent {
    let todos$: Observable<Array<Todo>>;

    constructor(private http: HttpClient) {}

    ngOnInit() {
        this.todos$ = this.http.get<Array<Todos>>(...)
    }
}

模板

<div *ngFor="let todo of todos$ | async">
    {{ todo }}
</div>

我的理解是 HttpClient Observable 將發出以下成功事件：

next(value)
completed

和錯誤

error(error)
completed

當 observable 發出完成的事件時，訂閱將關閉。

因此，如果您訂閱了像 Angulars HttpClient Observable 這樣的冷 observable，您如何重試該 HttpClient 請求？

異步操作符進行初始訂閱，但會在冷 observable 完成后立即關閉，如果您想再次執行它，如何讓異步操作符重新訂閱？ 例如，如果您想刷新數據。

Answer 1

只需重新分配 todos$ 這將再次觸發 http 請求

成分

export class TestComponent {
    public todos$: Observable<Array<Todo>>;

    constructor(private http: HttpClient) {}

    ngOnInit() {
     this.getTodos();
    }

    getTodos(){
        this.todos$ = this.http.get<Array<Todos>>(...);
    }
}

模板

<button (click)="getTodos()" >Refresh 🚀</button>

演示🚀

Answer 2

你有一個retry和retryWhen操作符。 和他們一起玩 :)

https://rxjs-dev.firebaseapp.com/api/operators/retry

https://rxjs-dev.firebaseapp.com/api/operators/retryWhen

@編輯

要刷新有關成功的數據，您可以這樣做：

export class TestComponent {
    refresh$ = new BehaviorSubject(true);
    todos$: Observable<Array<Todo>>;

    constructor(private http: HttpClient) {}

    ngOnInit() {
        this.todos$ = this.refresh$
            .pipe(
                 switchMap(() => this.http.get<Array<Todos>>(...))
            )
    }

    refreshData() {
        this.refresh$.next();
    }
}