Angular路由延迟

Question

我是 Angular 的新手，所以还在习惯路由功能。

我有一个点击向导，在最后一步，有一个 'Complete' 按钮，它应该 post 到数据库并将用户路由到特定页面。但是，我有一个时间问题，因为用户在数据库插入完成之前被路由到该页面，这意味着该页面不显示他们新创建的评论。

    next() {
        this.reviewOutput.emit(this.formGroup.value);
        delay(1000);
        this.router.navigate(['/reviews']);
    }

/reviews 组件在加载时从数据库中选择所有用户的评论，但这是在将评论添加到数据库之前完成的。

添加 1 秒的延迟可以解决问题，但不是很好'clean'，我想这也不是好的做法。有没有解决这个问题的'better'方法？

编辑：父组件还从另一个子组件获取数据，因此它需要是执行 POST API 调用的子组件。

Answer 1

将 API 和 return 响应称为可观察值。订阅成功响应后，您可以重定向到所需的组件。

data.service.ts :

I assume you have a POST API and you're passing the review as payload.

addReview(review: string): Observable<ApiResponse> {
    return this.http.post<ApiResponse>(
        // Your POST API,
        review,
        httpOptions
    )
}

app.component.ts :

this.dataService.addReview(this.formGroup.value).subscribe(
    response => {
        console.log("Response :",response)
        // On success, route to reviews
        this.router.navigate(['/reviews']);
    },error => {
        console.log('Error :',error)
    }
);

Angular路由延迟

Angular routing delay

angular-routing

angular