Question

我对Angular还是很陌生，所以仍然习惯了路由功能。

我有一个单击向导，在最后一步，有一个“完成”按钮，该按钮应发布到数据库并将用户引导到某个页面。但是，我遇到了一个计时问题，即在数据库插入完成之前将用户路由到该页面，这意味着该页面未显示其新创建的评论。

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

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

增加1秒的延迟可以解决此问题，但它不是很“干净”，我想也不是很好的做法。有没有“更好”的方法来解决此问题？

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

Answer 1

调用API并以可观察的形式返回响应。订阅成功响应后，您可以重定向到所需的组件。

data.service.ts ：

我假设您具有POST API，并且您正在通过审核作为有效载荷。

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)
    }
);

角路由延迟

1 个答案: