Как я могу перейти к определенной викторине c на основе quizId? - PullRequest
Новая
       63

Как я могу перейти к определенной викторине c на основе quizId?

0 голосов
/ 13 июля 2020

Я работаю над компонентом выбора викторины. Я хотел бы направить его на указание c викторины на основе quiz.id в массиве QUIZ_DATA во внешнем файле quiz.ts, например TS-Quiz или DI-Quiz. Когда я нажимаю на TypeScript Quiz (TS-Quiz), я получаю вводную часть DI-Quiz; это должна быть вводная информация TS-Quiz. Не знаю, как использовать тип quiz.id, который передается компоненту IntroductionComponent в [routerLink].

И я получаю эту ошибку при загрузке первого вопроса в викторине: TypeError: Cannot read property '0 'of undefined

Я бы хотел, чтобы сначала была страница выбора (сделана), затем следовало вступление (на основе 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' }">

My Введение Компонент выглядит так: 

<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>

А вот моя настройка маршрутизации в моем quiz-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 }
];

Ответы [ 2 ]

2 голосов
/ 13 июля 2020

Параметр маршрутизации можно получить следующим образом:

Обновите 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();
    });
 }

}

Обновите mat-card *ngIf в introduction.component.html, как показано ниже, 

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

Это поможет правильно перейти на необходимую вступительную страницу на основе выбранной викторины. Вот StackBlitz

2 голосов
/ 13 июля 2020

Глядя на quiz.component.ts в методе getQuestion (line 85), метод getQuestions службы викторины возвращает массив, а не объект. Итак, вопросы о свойствах будут неопределенными.

Похоже, что идентификатор викторины отсутствует, вам нужно получить идентификатор викторины, чтобы получить вопросы этой викторины, примерно так: 

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

Конечно, есть и другие способы сделать это, это только один метод.

Надеюсь, что это поможет.

...