为什么我的测验应用程序中的问题之间的导航不起作用？

Question

我很难在问题之间导航，请参阅：https://stackblitz.com/edit/angular-9-quiz-app。单击下一个按钮时，questionID 会增加 1，然后切换回 1，并且不会导航到下一个问题。我在 Chrome 开发工具中收到此错误消息：

错误：未捕获（承诺）：错误：无法匹配任何路由。 URL 段：'question/2'

不确定我错过了什么。它应该在不使用 id 的情况下工作，而是使用 quizData 的索引。请你帮忙。谢谢！

在 di-quiz 模板中：

<button type="button" (click)="nextQuestion()">
  Next &raquo;
</button>

调用服务中的下一个问题：

nextQuestion() {
  this.quizService.nextQuestion();
}

在quiz.service.ts:

constructor(
  private timerService: TimerService,
  private router: Router,
  private route: ActivatedRoute) {
    /* this.route.paramMap.subscribe(params => {
      this.setQuestionIndex(+params.get('questionText'));
      this.question = this.getQuestion;
    }); */
}

nextQuestion() {
  this.questionID++;
  this.navigateToNextQuestion();
  this.timerService.resetTimer();
  this.increaseProgressValue();
}

navigateToNextQuestion() {
  this.router.navigate(['/question', this.questionID]);
}

在测验-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { IntroductionComponent } from './containers/introduction/introduction.component';
import { DependencyInjectionQuizComponent } from './containers/dependency-injection-quiz/dependency-injection-quiz.component';
import { ResultsComponent } from './containers/results/results.component';

const routes: Routes = [
  { path: '', redirectTo: 'intro' },
  { path: 'intro', component: IntroductionComponent },
  { path: 'question', component: DependencyInjectionQuizComponent },
  { path: 'question/:questionID', component: DependencyInjectionQuizComponent },
  { path: 'results', component: ResultsComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class QuizRoutingModule {}

我的数据对象（在 quiz.ts 中）看起来像：

export const QUIZ_DATA: Quiz = {
  milestone: 'Dependency Injection Quiz',
  summary: "Dependency Injection is extremely powerful because it is a way of providing dependencies in your code instead of hard-coding them.",
  imageUrl: 'assets/images/DIDiagram.png',
  questions: [
    {
      questionText: 'What is the objective of dependency injection?',
      options: [
        { text: 'Pass the service to the client.', correct: true },
        { text: 'Allow the client to find service.', correct: true },
        { text: 'Allow the client to build service.' },
        { text: 'Give the client part service.' }
      ],
      explanation: 'a service gets passed to the client during DI'
    },
  ...
  ]
};

Answer 1

我看到的代码有很多问题。使用了很多 @Output 和 @Input。但大部分都是无关紧要的。我已尝试更改大部分问题，但仍然有少数事情悬而未决。请查看回购协议：

https://github.com/anooprvarrier/Quiz-example

我已经将所有依赖升级到最新版本。

为什么我的测验应用程序中的问题之间的导航不起作用？

Why is the navigation between questions in my quiz app not working?

angular

angular-router