如何根据 quizId 路由到特定的测验？

Question

我正在做一个测验-selection 组件。我希望它根据外部 quiz.ts 文件中 QUIZ_DATA 数组中的 quiz.id 路由到特定测验，例如 TS-Quiz 或 DI-Quiz。当我点击 TypeScript Quiz (TS-Quiz) 时，我得到了 DI-Quiz 介绍；应该是TS-Quiz的介绍信息。不确定如何使用传递给 [routerLink] 中的 IntroductionComponent 的 quiz.id 类型。

加载测验中的第一个问题时出现此错误：类型错误：无法读取未定义的属性“0”

我希望 select 页面首先（完成），然后是介绍（基于 quiz.id），然后是问题（基于 quiz.id），然后结果。

请在 Stackblitz 上查看我的运行应用程序：https://stackblitz.com/edit/angular-10-quiz-app

我的[routerLink]如下：

<mat-grid-tile *ngFor="let quiz of quizData"
  [routerLink]="['/quiz/intro', quiz.id]"
  [ngStyle]="{ 'background': 'url(' + quiz.imageUrl + ') no-repeat center top',
               'background-size': '380px 275px' }">

我的 IntroductionComponent 看起来像：

<ng-container *ngFor="let quiz of quizData">
  <mat-card *ngIf="quiz.id === 'DI_Quiz'">
    <mat-card-header>
      <div mat-card-avatar class="header-image"></div>
      <mat-card-title i18n>{{ quiz.milestone }} Quiz</mat-card-title>
      <mat-card-subtitle i18n>
        <span>How well do you know {{ quiz.milestone }}?</span>
        <span>Take the quiz and find out!</span>
      </mat-card-subtitle>
    </mat-card-header>
...
<mat-card-actions>
  <button class="btn btn-outline-primary" routerLink="/quiz/question/1">
     <span i18n><strong>Start the Quiz!</strong></span>
  </button>
</mat-card-actions>

这是我在测验中的路由设置-routing.module.ts:

const routes: Routes = [
  { path: '', redirectTo: 'select' },
  { path: 'select', component: QuizSelectionComponent },
  { path: 'intro', component: IntroductionComponent },
  { path: 'intro/:id', component: IntroductionComponent },
  { path: 'question', component: QuizComponent },
  { path: 'question/:questionIndex', component: QuizComponent },
  { path: 'results', component: ResultsComponent }
];

Answer 1

查看 quiz.component.ts，在 getQuestion (line 85) 方法中，测验服务的 getQuestions 方法 returns 是一个数组，而不是一个对象。因此，属性个问题将是未定义的。

似乎缺少测验 ID，您需要获取测验 ID 才能获取该测验的问题，如下所示：

this.question = this.quizService.getQuestions()[indexOfQuizId].questions[this.questionIndex - 1];

要获得indexOfQuizId，一种方法是将问题页面的路径更改为：

{ path: 'question/:quizId/:questionIndex', component: QuizComponent, pathMatch: 'full' },

然后用类似的东西得到测验的索引：

const quizId = this.activatedRoute.snapshot.paramMap.get('quizId');
const indexOfQuizId = this.quizData.findIndex(el => el.id === quizId);

当然还有其他方法，这只是一种方法。

希望对您有所帮助。

Answer 2

路由参数获取方式如下，

更新您的 introduction.component.ts 如下所示，

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { QUIZ_DATA } from '../../shared/quiz';
import { Quiz } from '../../shared/models/Quiz.model';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';


@Component({
  selector: 'codelab-quiz-intro',
  templateUrl: './introduction.component.html',
  styleUrls: ['./introduction.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class IntroductionComponent {
  quizData: Quiz = QUIZ_DATA;
  quizName: String = '';

  constructor(
    private route: ActivatedRoute,
  ) {}

 ngOnInit() {
    this.route.url.subscribe(segments => {
          this.quizName = segments[1].toString();
    });
 }

}

更新 introduction.component.html 中的 mat-card *ngIf，如下所示，

<mat-card *ngIf="quiz.id === quizName">

这将有助于根据所选测验正确导航到所需的介绍页面。这是一个StackBlitz

如何根据 quizId 路由到特定的测验？

How can I route to a specific quiz based on quizId?

routes

angular

angular-routerlink