Блог

В угловой таблице материалов перечислены элементы (события, как в разделе «волонтерские мероприятия»).

Следующее https://careydevelopment.us/blog/angular-material-tables-how-to-make-clickable-rows-that-take-users-to-a-new-route Я реализовал функцию «getEventDetail», предназначенную для перехода на страницу сведений при нажатии на строку в таблице списка.

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

Вот файл admin-event.component.ts:

 import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core';
import {merge, Observable, of as observableOf} from 'rxjs';
import {catchError, map, startWith, switchMap} from 'rxjs/operators';
import {ResponseApi} from '../../models/api';
import {EventService} from '../../services/event.service';
import {Event} from '../../models/event';
import {MatTableDataSource} from '@angular/material/table';
import {Router} from "@angular/router";


@Component({
  selector: 'app-admin-events',
  templateUrl: './admin-events.component.html',
  styleUrls: ['./admin-events.component.scss']
})
export class AdminEventsComponent implements OnInit {

  eventList$: Observable<Event[]>;  
  eventList: MatTableDataSource<Event>;
  
  an_event: any;

  displayedColumns: string[] = [
    'description',
    'start_time',
    'end_time',
    'cell',
    'task_type'
  ];


  constructor(private eventService: EventService,
    private router: Router,
    ) { }
      
    ngOnInit(): void {
      this.getEvents();
      this.getEventDetail(this.an_event);
 
    }
  
    getEvents(): void {
      this.eventService.list().subscribe(
        (responseApi: ResponseApi<Event>) => {
          this.eventList = new MatTableDataSource(responseApi.results);
      })
    }
  
    getEventDetail(an_event: Event) {
      let route = '/admin-events/details/';
      this.router.navigate([route], { queryParams: { id: an_event.id } } );
    }
 

Вот выдержка из html — файла:

 
  <mat-table class="events__content__table" [dataSource]="eventList">


  <ng-container matColumnDef="description">
      <mat-header-cell *matHeaderCellDef 
      class="events__content__table__header">
      Description</mat-header-cell>
      <mat-cell class="events__content__table__cell--text"
                *matCellDef="let item">{{item.description}}

              </mat-cell>
  </ng-container>

(...)

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  
  <mat-row mat-row 
  (click)="getEventDetail(row)"
  *matRowDef="let row; columns: displayedColumns"></mat-row>
 
</mat-table>

 

Вот выдержка из файла app-routing.module.ts:

 import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './pages/login/login.component';
import {DefaultLayoutComponent} from "./layouts/default-layout/default-layout.component";
import {ProfileComponent} from "./pages/profile/profile.component";
import {ScheduleComponent} from "./pages/schedule/schedule.component";
import {EventsComponent} from "./pages/events/events.component";
import {CanActivateViaAuthGuard} from './guards/CanActivateViaAuthGuard';
import {CellsComponent} from './pages/cells/cells.component';
import {RegisterConfirmComponent} from "./pages/register-confirm/register-confirm.component";
import {CkEditorPageComponent} from "./pages/ck-editor-page/ck-editor-page.component";
import {MobileComponent} from "./pages/mobile/mobile.component";
import {LogoutComponent} from "./pages/logout/logout.component";
import {AdminLayoutComponent} from "./layouts/admin-layout/admin-layout.component";
import { AdminDashboardComponent } from './pages/admin-dashboard/admin-dashboard.component';
import { AdminEventsComponent } from './pages/admin-events/admin-events.component';
import { AdminEventDetailsComponent } from './pages/admin-events/admin-event-details/admin-event-details.component';


const routes: Routes = [

(...)

  {
    path: '',
    component: AdminLayoutComponent,
    children: [
      {
        path: 'admin-dashboard',
        component: AdminDashboardComponent,
      },
      {
        path: 'admin-events',
        component: AdminEventsComponent,
      },
      {
        path: 'admin-events/details/:id',
        component: AdminEventDetailsComponent,
      }    
    ]
  },
];

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

Любая помощь будет очень признательна.

В соответствии с определением маршрута с параметром,

Встраивание маркера параметра маршрута :id в путь определения маршрута является хорошим выбором для этого сценария, поскольку идентификатор требуется компонентом Herodetail и поскольку значение 15 в пути четко отличает маршрут до «Магнета» от маршрута для какого-либо другого героя.

Следовательно, :id требуется для admin-events/details маршрута, и вы не можете войти с queryParams помощью «как queryParams есть» для дополнительных параметров.

 {
  path: 'admin-events/details/:id',
  component: AdminEventDetailsComponent,
}  
 

Решение

Вы должны установить параметр маршрута, как показано ниже:

 getEventDetail(an_event: Event) {
  let route = '/admin-events/details/';
  this.router.navigate([route, an_event.id]);
}
 

Образец решения на СтекбЛитце