Ведение журнала свойств paramMap в консоли не определено

Question

У меня есть несколько настроек маршрутов в моем приложении для фотогалереи:

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

Когда пользователь нажимает на изображение из компонента списка галереи здесь:

<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 выполняется из компонента списка галереи:

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

Затем изображение должно отображаться на другом компоненте (компонент 'image-full-view'):

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

Возвращается selectedImage из компонента 'image-full-view' здесь:

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

    console.log(id);
    this.selectedImage = this.galleryService.getImage(id);
    console.log(this.selectedImage);
  }

Это не работает, и я продолжаю перенаправляться обратно в компонент галереи. Я обнаружил, что при записи переменной id в консоль она возвращает "undefined". Он должен возвращать идентификатор, полученный из URL-пути. также появляется сообщение об ошибке «Не удается прочитать свойство 'imagePath' из неопределенного".

Answer 1

Рабочая демонстрация в этом StackBlitz Link

Поскольку вы не можете получить parmMap из компонента details, я буду использовать наблюдаемый подход. Благодаря такому подходу мы получаем в будущем изменение URL-адреса изображения и обновляем его в соответствии с ним. Вы можете предоставить свои данные изображения-URL. Я здесь только даю обзор данных paramMap с моими данными. подход такой же и в вашем случае.

gallery.component.ts

export class GalleryComponent {
  constructor(private router: Router ) { }
  fullView(index: number){
    this.router.navigate(['/gallery' , index])
  }
}

gallery.compon enet. html

<div class="container m-1 p-1">
  <button class="btn btn-primary m-1" (click) ="fullView(1)"> One </button>
  <button class="btn btn-primary m-1" (click) ="fullView(2)"> Two </button>
  <button class="btn btn-primary m-1" (click) ="fullView(3)"> Three </button>
  <button class="btn btn-primary m-1" (click) ="fullView(4)"> Four </button>
  <button class="btn btn-primary m-1" (click) ="fullView(5)"> Five </button>
</div>
<br>
<router-outlet></router-outlet>

image-fullview.component. html

<div class="container m-1" *ngIf="id">
  <span class="alert alert-primary m-1" > Your selected ID is : {{id}} </span>
</div>

image-fullview.component.ts

export class ImageFullViewComponent implements OnInit {
  id: number;
  constructor(private activatedRoute: ActivatedRoute) { }
  ngOnInit() {
    this.activatedRoute.paramMap.subscribe( (id: ParamMap) =>{
      this.id = +id.get('id');
    })
  }
}

В приведенном выше изображении с полным просмотром мы подписываемся на paramMap, а затем каждый раз, когда из изображения компонента галереи нажимается, чтобы оно отображалось здесь в этом компоненте полного изображения.