Angular turn Observable in ein Array

Question

Ich mache eine Galerie von Bildern in Angular. Beim Klicken auf jedes Bild möchte ich eine separate Komponente anzeigen, die im Prinzip auf das Bild, aber in voller Größe geklickt wird. Porblem ist ich nicht sicher, wie man Bild erhält, das angeklickt wird.

Bisher habe ich diesen Dienst, um API-Anfrage zu machen, um Bilder zu bekommen.

import { Injectable } from '@angular/core'; 
import { HttpClient } from '@angular/common/http'; 

@Injectable() 
export class ImagesService { 
    constructor(private http: HttpClient) { } 
    images = []; 
    link = 'https://api.com?k='; 
    ApiKey = '12345'; 

    public loadImages() { 
    return this.http.get(this.link + this.ApiKey); 
    } 
} 

Dann habe ich Gallery-Komponente, wo ich loadImages()

export class GalleryComponent { 
    visibleImages:Object = []; 

    constructor(private imagesService: ImagesService) { 
    this.imagesService.loadImages().subscribe(data => this.visibleImages = data); 
    } 
} 

dann in HTML-Code Gallery Komponente abonnieren zeige ich Bilder wie diese

<li *ngFor="let image of visibleImages"> 
    <a [routerLink]="['/image', image.id]"> 
    <img src="{{image.urls.small}}"/> 
    </a> 
</li> 

Das Problem ist also, wie klickten zu bekommen Bild? Ich dachte über so etwas in meinem Dienst nach. Aber dieses Problem, wie kann ich Daten speichern, die ich von API zu this.images bekomme? Plus, wie ich verstehe, ist die Antwort, die ich zurückbekomme, ein Observable, also kann ich es nicht wirklich in einem Array speichern?

getImage(id:number) { 
    this.images.slice(0).filter(image => image.id == id); 
    } 

Und in Bildkomponente

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

Answer 1

Verwendung do Bediener die Daten abfangen:

import { Injectable } from '@angular/core'; 
import { HttpClient } from '@angular/common/http'; 
import 'rxjs/add/operator/do'; 

@Injectable() 
export class ImagesService { 
    constructor(private http: HttpClient) { } 
    images = []; 
    link = 'https://api.unsplash.com/photos/?client_id='; 
    ApiKey = 'your key'; 

    public loadImages() { 
    return this 
     .http.get(this.link + this.ApiKey) 
     .do((images: any[]) => this.images = images) 
    } 

    getImage(id:number) { 
    this.images.slice(0).filter(image => image.id == id); 
    } 
} 

wenn die ImageComponent in der gleichen Seite wie GalleryComponent ist müssen Sie die this.route.params abonnieren :

ngOnInit() { 
    this.route.params.subscribe(params => this.image = this.imagesService.getImage(+params['id'])) 
    }