Маршрут продолжает перенаправляться

Question

Я создаю простое приложение для создания фотогалереи. Когда пользователь выбирает изображение, оно должно отображать выбранное изображение. Это выполняется с помощью маршрута к другому компоненту, поэтому, когда пользователь нажимает на изображение, которое он хочет просмотреть, выбранное изображение затем отображается само по себе через другой компонент. У меня проблема в том, что когда я выбираю изображение в пользовательском интерфейсе, URL-адрес корректно меняется на localhost: 4200 / gallery / 1 (1 представляет идентификатор изображения), но только на миллисекунду. Затем он перенаправляет обратно на localhost: 4200 / gallery.

Я дважды проверил мои маршруты и, насколько я могу судить, они настроены правильно. Я вложил маршрут 'image-full-view' в дочерний маршрут галереи.

Это соответствующие маршруты из моего модуля маршрутизации:

const routes: Routes = [
  { path: '', redirectTo: '/gallery', pathMatch: 'full' },
  { path: 'gallery', component: GalleryComponent, children: [
    { path: ':id', component: ImageFullViewComponent},
  ]}, 

Это галерея html файл, в котором отображаются все изображения (здесь в качестве выходного маршрутизатора должен использоваться компонент 'image-full-view' ниже):

<ul class="container">
    <li class="item-list-container"><app-image-item
    class="image-item"
    *ngFor="let imageEl of images"
    [image]="imageEl"
    (click)="onImageSelect(imageEl.id)"
    ></app-image-item>
    </li>
</ul>
<router-outlet></router-outlet>

Это метод onImageSelect сверху, который хранится в файл галереи ts:

onImageSelect(id: number) {
    this.router.navigate(['/gallery', id])
    console.log(id);
  }

Это файл 'image-full-view' html, в котором должно отображаться выбранное изображение:

<div class="container">
    <img class="image-full-view" [src]="selectedImage.imagePath" alt="Man Praying">
    <p>{{ selectedImage.name }}</p>
</div>

Наконец, это ' Файл полного просмотра изображения, где хранится selectedImage:

selectedImage: Image;

  ngOnInit() {
    const id = this.route.snapshot.paramMap['id'];
    this.selectedImage = this.gallerService.getImage(id);
  }

Извините, я знаю, что это много кода, но я включил только то, что мне показалось уместным. Надеюсь, кто-то может помочь!