изменить полное изображение на основе большого пальца, который нажал не работает, метод в обслуживании

Question

Я создал приложение галереи в Angular, которое отображает 3 больших пальца и одно большое изображение. На основании большого пальца по нажатию полное изображение должно - , но не - изменяться - данные и методы работают на один уровень выше. Когда я console.log fullImage на images.component.ts <- значение не изменяется <br> Может кто-нибудь, пожалуйста, укажите ошибку для меня
(git репо с кодом: https://github.com/GosiaPtak/gallery-app)
gallery.service.ts

import images from '../../assets/images.json';


export class GalleryService {
  thumbsDomain: string = images.properties.photos.items.properties.image.chance.url.domain.replace('/300/150', '/200/133');
  thumbsUrls: string[] = [];
  imagesDomain: string = images.properties.photos.items.properties.image.chance.url.domain.replace('/300/150', '/600/400');
  imagesNumber: string[] = ['?image=1001', '?image=1002', '?image=1003'];
  displayedImage: string = this.imagesDomain + this.imagesNumber[0];

getUrls = () => {
  this.imagesNumber.forEach((value) =>  this.thumbsUrls.push(this.thumbsDomain + value));
  //
}
onDislayImage = (i: number) => { // (click)="onSetDislayedImage(i)" <- in thumbnails.component.html
  this.displayedImage = this.imagesDomain + this.imagesNumber[i];
  console.log(this.displayedImage);
}
}

images.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { GalleryService } from '../gallery.service';

@Component({
  selector: 'app-images',
  templateUrl: './images.component.html',
  styleUrls: ['./images.component.scss']
})
export class ImagesComponent implements OnInit, OnDestroy {
fullImage: string;
  constructor(private imagesService: GalleryService) {  }

  ngOnInit() {
    this.fullImage = this.imagesService.displayedImage;
  }
ngOnDestroy(): void {}
}

структура приложения:

1 уровень - Приложение
2 уровень - Галерея
2 уровень - gallery.service.ts

3 уровня --- thumbnails.component.ts
3 lvl --- (click) = "onSetDislayedImage (i)" <- in thumbnails.component.html <br> 3 уровень --- images.component.ts
3 уровень --- <- в images.component.html </p>

Answer 1

Вам нужен, например, ReplaySubject в вашем сервисе галереи:

subject = new ReplaySubject<string>(1);

onDislayImage = (i: number) => {
this.displayedImage = this.imagesDomain + this.imagesNumber[i];
this.subject.next(this.displayedImage);
}

yourSubject(): ReplaySubject<any> {
return this.subject;
}

Внутри вашего компонента изображений ngOnit вы можете добавить что-то вроде:

this.fullImage = this.imagesService.displayedImage;
this.imagesService.yourSubject().asObservable().subscribe((res) => {
this.fullImage = res;
});

Не забудьте отписаться об уничтожении.