页面内容只有在强制刷新后才会显示，而在重定向时则不会显示。

Question

如何在不硬刷新的情况下重定向到另一个路由？

这是我第一次创建 ionic/angular 应用程序。这是一份调查问卷，当用户回答完一组问题后，他们将被重定向到结果页面。

我的重定向代码如下：

import { Router } from '@angular/router'
private router: Router
this.router.navigate(['/result/' + this.current_survey.id]);

我只有在强制刷新后才能看到我的结果，但我不确定原因。

导致跳转的代码位于我的调查组件中，我将其重定向到结果组件。在结果组件的ngOnInit()函数中，我从Web数据库中检索保存的数据，但此时数据不存在。

调查组件中的代码块如下：

if (this.current_survey.finished) {
        this.calculateResult().then((result) => {
          this.current_survey.result = result;
          this.storageService.update(this.current_survey, this.helperService.SURVEY_STORAGE).then(
            (value) => {
            this.storageService.removeKey(this.helperService.LAST_NOT_FINISHED_SURVEY);
            this.router.navigate(['result', this.current_survey.id]);
          });
        });
    }

我的结果组件中的ngOnInit如下：

// Check if survey is a new survey or should be load from previos surveys
    let survey_id;

    // Get id from route, if any id was given in url
    this.route.paramMap.subscribe((params: ParamMap) => {
      survey_id = params.get('id');
    });

    if (survey_id !== null) {
      survey_id = parseInt(survey_id, 10);
    }

    this.showResults(survey_id);

在我的结果组件中，ngOnInit 中调用的方法如下所示：

 const key = this.helperService.SURVEY_STORAGE + '_' + survey_id;
      // Preload all neccessary data
      this.storageService.getDataByName(key).then((data) => {
        if (data.length === 0) {
            this.alertService.show('Error', '', 'Result not found :(');
        } else {
          this.survey = data.shift();
        }
      });

- Akif

Answer 1

也许你可以提供更多信息。调查结果存储在哪里？如果它们存储在数据库中，在结果页面组件的ngOnInit()方法中，您应该能够查询最新的结果。另一个选项可能是当您导航到结果页面时，您已经在调查结果发布之前这样做了。您可以尝试像这样确保保存后再尝试检索值：

save(surveyResults, surveyId) {
    this.someService.postResults(surveyResults)
    .subscribe(() => this.navigate(['result', surveyId]))
}

- corytak

---

感谢您的回答。我添加了一些额外的信息和代码块的背景信息。我认为您是正确的，如果结果组件尝试访问数据库，那么它现在还没有准备好。但是我将所有内容放在一个Promise中，并在“then”块中逐步执行以避免此问题。 - Akif

啊，我想你的surveyId还没有及时返回来获取结果。你可能想要尝试做类似这样的事情： this.route.paramMap.pipe( switchMap(params => this.showResults(params.get('id')) ).subscribe() 这样你就可以确信在调用showResults之前已经获取到了你的路由参数。 - corytak

谢谢您的提示。我也尝试了，但没有任何改变。我不确定如何继续处理这个问题。对我来说，一切看起来都很好，并且很有意义。在showResults函数中，我使用console.log并显示正确的surveyId。也许storageService在我的函数中还没有准备好，但我可以通过Promise来解决这些问题，或者我对Promise和async的理解非常糟糕。 - Akif