Home / Questions / 158977
Accepted
Nacho
Asked: 2020-04-25 20:16:06 +0800 CST 2020-04-25 20:16:06 +0800 CST

Pass objects from a Service to Components

  • 772

In principle I want to tell you that I tried several ways but they did not work. It is an application that uses the Spotify backend, and for this I have a service which handles the requests so that I can use them in my component and extract data from the artist, which works within a specific component. Now, once I navigate from one page to another that data obviously "flies" as the component is recreated. To solve this I decided to create another service which saves the JSON data in objects. I really don't know what I'm doing wrong though as I keep getting them as "undefened" in my other component. Although the data in the service is persistent... Thank you very much in advance!

// artist.service.ts

import { OnInit, Injectable } from '@angular/core';
import { SpotifyService } from './spotify.service';
import { ActivatedRoute } from '@angular/router';

@Injectable()
export class ArtistService implements OnInit {

    artist: any = {};
    tracks: any = [];
    albums: any = [];
    artistRel: any = {};

    constructor(private _spotify: SpotifyService, public route: ActivatedRoute) {}

    ngOnInit() {
        this.route.params.map(params => params['id'])
      .subscribe(id => {
        this._spotify.getArtista(id)
          .subscribe(artist => {
            console.log(artist, 'Artista');
            this.artist = artist;
          });
        this._spotify.getTop(id)
            .map( (resp: any) => resp.tracks)
              .subscribe( tracks => {
                console.log(tracks, 'Pistas');
                this.tracks = tracks;
          });
        this._spotify.getAlbumsArtist(id)
            .map( (resp: any) => resp.items)
              .subscribe( albums => {
                console.log(albums, 'Albums');
                this.albums = albums;
          });
        this._spotify.getRelatedArtists(id)
            .map( (resp:any) => resp)
              .subscribe( related => {
                console.log(related, 'Artistas relacionados');
                this.artistRel = related;
          });
      });
    }
}

    // artist.component.ts

    import { Component, OnInit } from '@angular/core'; 
    import { ActivatedRoute, Data } from '@angular/router'; 
    import { ArtistService } from '../../services/artist.service';

    @Component({   
      selector: 'app-artist',   
      templateUrl: './artist.component.html' })

   export class ArtistComponent implements OnInit {

      artist: any = {};


      constructor(private route: ActivatedRoute, public _artist: ArtistService){}

      ngOnInit() {
        this.artist = this._artist.artist;  } }
angular5

1 Answers

  1. Best Answer

    The component lifecycle in Angular doesn't apply to services: your problem is that the ngOnInit() method is never going to be called.

    If you want to cache the data, you can simply save it after the first call, doing something like:

    // artist.service.ts

import { OnInit, Injectable } from '@angular/core';
import { SpotifyService } from './spotify.service';
import { ActivatedRoute } from '@angular/router';

@Injectable()
export class ArtistService {

  artist: any = {};
  tracks: any = [];
  albums: any = [];
  artistRel: any = {};

  constructor(private _spotify: SpotifyService) {}
    
  getArtista(id): Observable<any> {
    if (this.artist) {
      return Observable.of(this.artist);
    }
    return this._spotify.getArtista(id).do(artist => {
      console.log(artist, 'Artista');
      this.artist = artist;
    });
  }
  
  //otros métodos
}

    • 0