如何在点击Angular 2+上显示完整图像

Question

我是Angular的新手，我花了很多时间找到解决方案，但却无法解决问题。
想法是 - 有两个组件，一个用于照片网格，另一个用于完整图像。我想点击第一个组件中的图像，并显示带有完整图像的第二个组件 问题是我无法显示点击的照片。
图像来自Unsplash API
这是我的服务。第一个功能是获取每张照片，第二个功能是获取被点击的照片。

@Injectable()
export class ImageService implements OnInit {
  images: Image[];
  image: Image;
  constructor(private http: Http) { }
  ngOnInit() {
  }

  fetchData(): Observable<Image[]> {
    let API_KEY = 'be469fc81f54e77afeaaccd5d4915f8bbe85c330d347f08213c0662735ec89ae';
      let options = {
        params: {
          client_id:  API_KEY,
          page: 1,
          per_page: 10
        }
      }
    return this.http.get('https://api.unsplash.com/photos', options)
                    .map(data => data.json() as Image[]);
  }

  getImage(id: number): Observable<Image> {
   return this.fetchData()
     .map(images => images.find(image => image.id === id))
 }

}

这是我的详细图片组件

@Component({
  selector: 'app-detail-img',
  templateUrl: './detail-img.component.html',
  styleUrls: ['./detail-img.component.css']
})
export class DetailImgComponent implements OnInit {
  image:any;

  constructor(private imageService: ImageService, private route: ActivatedRoute) { }

  ngOnInit() {
     this.getImage()
  }

  getImage() {
    return this.image = this.imageService.getImage(
        +this.route.snapshot.params['id']
      )
  }

}

这是routerLink和我试图显示图像的方式

    <a [routerLink]="['/image', image.id]">
        <img src="{{image.urls.small}}" class="img-fluid">
      </a>

<div [ngStyle]="{'background-image':'url('+image.id+')'}">

这是我的Image类

export class Image  {
  id: number; 
  link: string;
  color: string;
}

我认为问题出在我的detail-img component中，因为我尝试console.log(this.image)时未定义，但我不知道如何处理它。

感谢任何帮助，因为我对这项任务感到困惑，并且不知道如何解决它。

fetchData（）的响应如何