Access data array in multiple routes angular 4 - arrays

Question

I have a service which has some data stored like this and functions that push data to it:
service.ts
export class SongsService {
albumsChanged = new Subject();
//Define future album name and songs list
newAlbumName:any;
newSongs:any;
newAlbumID:any;
// New album object
albumData:{name: string, songs:Array<string>};
albums = [
{
name: 'One album',
songs: [
'song1 Album 1',
'song2 Album 1',
'song3 Album 1',
]
}];
albumSongs(albumID){
return this.http.get('http://api.musicgraph.com/api/v2/album/'+
albumID +'/tracks?"+ api_key + "&limit=30").map(
(res:Response) => {
const songData = res.json();
// func to get all tracks
var tracks = songData.data.map(a => a.title);
// Function to filter repeated songs
var uTracks = tracks.filter(function(elem, index, self) {
return index == self.indexOf(elem);
});
return this.allTracks= uTracks;
}
);
}
// .subscribe(album => {console.log(album)}) returns []
newAlbum(name:string){
name = name.replace(/ /g, '+');
var albumID= '';
this.http.
get('http://api.musicgraph.com/api/v2/album/suggest?'
api_key + '&limit=2&prefix=' + name)
.subscribe(
( res:Response) => {
var rawData = res.json();
// console.log(rawData);
var albumName:string = rawData.data[0].title;
albumID = rawData.data[0].id;
this.albumSongs(albumID).subscribe(
songs => {
this.newSongs = songs;
console.log("And this are the songs in newAlbum = " + this.newSongs );
this.albumData = {
name:albumName,
songs:this.newSongs
};
this.albums.push(this.albumData)
this.albumsChanged.next(this.albums.slice())
}
);
}
);
this.albumsChanged.next(this.albums.slice());
}
newAlbum (name:string) {
//function that gets album name from api
this.albums.push(albumObj);
this.albumsChanged.next(this.albums.slice());
}
I have set my app.component to run an init function as a seed:
import { Component, ViewChild, ElementRef, OnInit } from '#angular/core';
import { SongsComponent } from './songs/songs.component';
import { Router } from '#angular/router';
import { SongsService } from './songs.service';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: []
})
export class AppComponent {
albums:any = [];
constructor(private songsService: SongsService){
};
ngOnInit() {
this.songsService.init()
}
}
App.module
const appRoutes: Routes =[
{path: '', component: AlbumsComponent},
{path: ':album', component: SongsComponent},
];
#NgModule({
declarations: [
SongsComponent,
AppComponent,
AlbumsComponent
],
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(appRoutes),
HttpModule
],
providers: [SongsService],
bootstrap: [AppComponent]
})
export class AppModule {}
When I console.log(this.albums) in the next component it only has the seed I hard coded on service.ts.
Albums.component.ts
#Component({
selector: 'app-albums',
templateUrl: './albums.component.html',
styleUrls: ['./albums.component.css'],
providers: []
})
export class AlbumsComponent {
#ViewChild('albumInput') albumInput: ElementRef;
#ViewChild('deleteIcon') deleteIcon: ElementRef;
private albums:{name: string, songs:Array<string>}[] = [];
private subscription: Subscription;
constructor(private songsService: SongsService,
private router: Router){};
ngOnInit() {
this.albums = this.songsService.albums;
this.subscription = this.songsService.albumsChanged
.subscribe(
(albums:{name: string, songs:Array<string>}[]) => {
this.albums = albums;
});
console.log(this.albums);
}
albumslog(){
console.log(this.albums)
}
// albumSongs(){
// this.router.navigate([])
// }
deleteAlbum(indexOfAlbum){
console.log(this);
console.log(indexOfAlbum);
this.songsService.albums.splice(indexOfAlbum,1);
addAlbum(albumName){
this.songsService.newAlbum(albumName);
console.log(this.songsService.albums);
And songs.components:
#Component({
selector: 'app-songs',
templateUrl: './songs.component.html',
styleUrls: ['./songs.component.css'],
providers: []
})
export class SongsComponent implements OnInit {
private subscription: Subscription;
private albums:any;
private album:any;
private songs:Array<string>;
private albumIndex:string;
constructor(private songsService: SongsService,
private router: Router,
private route: ActivatedRoute){};
ngOnInit() {
var albumIndex = +this.route.snapshot.params['album'];
console.log(albumIndex);
this.albums = this.songsService.albums;
this.subscription = this.songsService.albumsChanged
.subscribe(
(albums:{name: string, songs:Array<string>}[]) => {
this.albums = albums;
this.songs = this.getAlbum(albumIndex);
});
console.log(this.albums);
this.getAlbum(albumIndex);
// console.log(this.songsService.getAlbum("Así en el Cielo Como en la Selva"))
console.log(this.songs);
}
getAlbum(index: number){
return this.album = this.albums.splice(index)
Therefore, when I go to another route my service.albums from my service is empty, how can I keep this data over many routes?