2

en principio quiero comentarles que intente varias formas pero no funcionaron. Es una aplicación que utiliza el backend de Spotify, y para ello tengo un servicio el cual se encarga de las peticiones para asi poder utilizaras en mi componente y extraer datos del artista, el cual funciona dentro de un componente específico. Ahora bien, una vez que navego de una página hacia a otra esos datos obviamente "vuelan" ya que se vuelve a crear el componente. Para solucionar esto decidi crear otro servicio el cual me guarde los datos JSON en objetos. Sin embargo realmente no se en que le erro ya que sigo obteniendolos como "undefened" en mi otro componente. A pesar de que los datos en el servicio son persistentes... Desde ya muchas gracias!

// 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;  } }
2
  • Buenas, puedes mostrar el código de como llamas al servicio en tus dos componentes? Viendo solo el código del servicio no se puede deducir que estas haciendo mal.
    – lDanny7
    el 25 abr. 2018 a las 7:12
  • Puedo mostrarte una de las tantas formas que intente ya que siempre obtengo el objeto vacio. En un componente -> creo una variable -> artist: any = {} . Inyecto en el constructor el servicio mostrado y trato de acceder -> this.artist = this._auth.artist en caso del artista. Todo el codigo del servicio lo probe en el componente y funciona
    – Nacho
    el 25 abr. 2018 a las 7:18

1 respuesta 1

0

El ciclo de vida de los componentes en Angular no se aplica a los servicios: tu problema es que el método ngOnInit() no se va a llamar nunca.

Si quieres cachear los datos, puedes simplemente guardarlos tras la primera llamada, haciendo algo así como:

// 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
}

1
  • Muchas gracias Pablo por tu ayuda!, algo tan simple y no lo note...Me volvio loco. Gracias nuevamente
    – Nacho
    el 25 abr. 2018 a las 16:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.