Angular 9测验应用中的导航不起作用

Question

bounty到期在4天内。该问题的答案有资格获得+ 50声望赏金。multiv123正在寻找来自信誉良好的来源的答案。

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

错误：未捕获（承诺）：错误：无法匹配任何路由。网址段：“ question / 2”

不确定我要缺少什么。它应该在不使用id的情况下工作，而应使用quizData的索引。请你能帮忙。谢谢！

在测验模板中：

<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]);
}
在quiz-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'
    },
  ...
  ]
};

我在问题之间的导航上遇到了困难，请参阅：https://stackblitz.com/edit/angular-9-quiz-app。当单击下一个按钮时，questionID将得到...

Answer 1

我看到的代码有很多问题。有很多@Output和@Input被使用。但是它们大多数无关紧要。我已尝试更改大多数问题，但仍然有一些事情尚待解决。请看一下仓库：