Я изо всех сил пытаюсь получить путь для отображения

Question

const routes: Routes = [
    { path: '', redirectTo: '/students', pathMatch: 'full' },
    {
       path: 'students',
       component: StudentsComponent,
       children: [
           { path: '', component: StudentSignupComponent },
           { path: 'all-students', component: AllStudentsComponent },
           { path: ':id', component: StudentComponent}
       ]
    },

      <ul *ngFor="let student of students; let i = index" class="list-group">
    <a [routerLink]="[i]">e

Если я использую этот код, он выдаст мне сообщение об ошибке:

Ошибка: Uncaught (в обещании): Ошибка: невозможно сопоставить ни один маршрут. Сегмент URL: «студенты / все студенты / 0»

Как я могу это исправить?

Answer 1

Вы должны использовать путь 'Students / 0' для студента с id = 0

Answer 2

Вы можете улучшить структуру своих маршрутов, как комментарий передо мной, следующим образом

const routes: Routes = [
  { path: '', redirectTo: '/students', pathMatch: 'full' },
  {
    path: 'students',
    component: StudentsComponent,
    children: [
      {
        path: 'all-students', component: AllStudentsComponent,
        children: [ { path: ':id', component: StudentComponent} ]
      }
      { path: '', component: StudentSignupComponent, patchMatch:'full' },
    ]
  }
];

, затем написать список студентов с *ngFor в вашем all-students компоненте следующим образом:

<ul class="list-group">
  <li *ngFor="let student of students; let i = index">
    <!-- <a [routerLink]="'/' + student.id">{{ student.name }}</a> -->
    <a routerLink="/{{ student.id }}">{{ student.name }}</a>
    <!-- You can also use full route -->
    <!-- <a routerLink="/students/all-students/{{ student.id }}">{{ student.name }}</a> -->
  </li>
</ul>

Это в том случае, если ваш список студентов представляет собой массив объектов

students = [
  { name: "Girgis", age: 26, id: "e772df14-e19e-45cf-8961-c2f0b701a61b" },
  { name: "Bernhardt du Toit", age: 26, id: "0401306b-5919-4c2d-b25f-6e8ff389b8aa" }
];

Answer 3

Вы должны использовать :id в качестве дочерних элементов к all-students, как показано ниже,

const routes: Routes = [
{ path: '', redirectTo: '/students', pathMatch: 'full' },
{
path: 'students',
component: StudentsComponent,
children: [
  {
    path: 'all-students', component: AllStudentsComponent,
    children: [
    { path: ':id', component: StudentComponent}
  ]},
  { path: '', component: StudentSignupComponent, patchMatch:'full' },
]
},

Всегда желательно использовать пустой маршрут с patchMatch:full, так как они будут отображаться, только если есть полное совпадение

Answer 4

Может быть попробовать это? Хотя я не уверен

const routes: Routes = [
    { path: '', redirectTo: '/students', pathMatch: 'full' },
    {
       path: 'students',
       component: StudentsComponent,
       children: [
           { path: '0', component: StudentSignupComponent },
           { path: 'all-students', component: AllStudentsComponent },
           { path: ':id = 0', component: StudentComponent}
       ]
    },

      <ul *ngFor="let student of students; let i = index" class="list-group">
    <a [routerLink]="[i]">