Сделать данные хранящимися в провайдере постоянными

Question

Я использую модальный в Ionic 2, чтобы сделать что-то похожее на музыкальный плеер. В рамках этого модального метода я устанавливаю несколько переменных, которые я хочу сохранить, даже если модальный закрывается и создается новый модаль. Чтобы сохранить данные, которые я храню его в службе так же, как в Угловом 1.

Моей страницы компонента:

this.playerService.setRelease(this.params.get('release')); 
console.log(this.playerService.getStoredRelease()); // This works right after it is being stored. 

Моя служба:

setRelease(release) { 
    this.release = release; 
} 

getStoredRelease() { 
    return this.release; 
} 

Это все делается в модальном , После того, как я называю this.viewCtrl.dismiss(); и открыть модальный с помощью Ионный-х

openModal(release) { 
    let modal = Modal.create(ModalsContentPage, release); 
    this.navController.present(modal); 
} 

Я называю console.log (this.playerService.getStoredRelease()); перед установкой, и она не определена. Как я могу получить его там, где служба будет сохранять данные. Должен ли я использовать что-то еще?

player.ts

import {Component, Renderer} from '@angular/core'; 
import {NavController, Platform, NavParams, ViewController} from 'ionic-angular'; 
import {PlayerService} from '../../providers/player-service/player-service'; 
import {ConnectService} from '../../providers/connect-service/connect-service'; 
declare var $: JQueryStatic; 

@Component({ 
    templateUrl: './build/pages/player/player.html', 
    providers: [PlayerService, ConnectService] 
}) 

export class ModalsContentPage { 
    release; 
    art; 
    public song: any; 
    artists; 
    title; 
    private time: any; 
    private pos: any; 
    public counter: any; 

    constructor(
    public platform: Platform, 
    public params: NavParams, 
    public viewCtrl: ViewController, 
    public playerService: PlayerService, 
    public connectService: ConnectService 
) { 
    this.time = {}; 
    this.time.percent = 0; 
    this.playerService.getStoredRelease(); 
    console.log(this.params.get('release')); 
     if (this.playerService.getStoredRelease() === this.params.get('release')) { 
     console.log('wew lad i did it'); 
     } else { 
     this.playerService.setRelease(this.params.get('release')); 
     console.log(this.playerService.getStoredRelease()); 
     this.release = this.params.get('release'); 
     this.fetchSong(this.release._id); 
     this.art = this.release.artwork_url; 
    } 
    } 

    fetchSong(id) { 
    this.connectService.loadSongs(id) 
     .then(data => { 
     this.song = data[0]; 
     //this.songs = data ##The song var will just be at the index specified. 
     this.artists = this.song.artistsTitle; 
     this.title = this.song.title; 
     this.init(); 
     }) 
    } 

    init() { 
    $('.range-slider').on("touchstart",() => this.touchActivate()); 
    $('.range-slider').on("touchend",() => this.seekPos()); 
    this.playerService.initUrl("http://www.xamuel.com/blank-mp3-files/5min.mp3"); 
    this.subCounter(); 
    } 

    subCounter() { 
    this.counter = this.playerService.counter(this.song).subscribe(data => { 
     this.pos = data; 
     this.time.position = Math.round(this.pos); 
     this.time.dur = this.song.duration - this.time.position; 
     this.time.durMinutes = Math.floor(this.time.dur/60); 
     this.time.durSeconds = ('0' + Math.ceil(this.time.dur - this.time.durMinutes * 60)).slice(-2); 
     this.time.posMinutes = Math.floor(this.time.position/60); 
     this.time.posSeconds = ('0' + Math.ceil(this.time.position - this.time.posMinutes * 60)).slice(-2); 
     this.time.percent = this.time.position/this.song.duration * 100; 
    }) 
    } 

    dismiss() { 
    this.viewCtrl.dismiss(); 
    } 

    touchActivate() { 
    this.counter.unsubscribe(); 
    } 

    seekPos() { 
    var ms = (this.song.duration * 1000) * (this.time.percent/100); 
    this.playerService.seek(ms); 
    this.subCounter(); 
    } 
} 

игрок-service.ts

import { Injectable } from '@angular/core'; 
import {MediaPlugin} from 'ionic-native'; 
import {Observable} from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 


@Injectable() 
export class PlayerService { 
    private media: any; 
    public release: any; 
    public song: any; 
    private time: any; 
    public playing: boolean; 

    constructor() { 
    this.time = {}; 
    } 

    initUrl(release) { 
    this.media = new MediaPlugin(release); 
    this.media.play(); 
    console.log("ASDF"); 
    this.media.setVolume('0.0'); 
    //this.counter(null); 
    } 

    setRelease(release) { 
    this.release = release; 
    console.log('got it'); 
    } 

    getStoredRelease() { 
    //console.log(this.release); 
    return this.release; 
    } 

    counter(song) { 
    return Observable 
     .interval(500) 
     .flatMap(() => { 
     return this.media.getCurrentPosition(); 
     }); 
    } 

    seek(pos) { 
    this.media.seekTo(pos); 
    } 

    pause() { 
    this.playing = false; 
    this.media.pause(); 
    } 

    play() { 
    this.playing = true; 
    this.media.play(); 
    } 
} 

music.ts (компонент, который вызывает модальность):

import {Component} from '@angular/core'; 
import {Modal, NavController, Loading} from 'ionic-angular'; 
import {ModalsContentPage} from '../player/player'; 
import {AlbumPage} from '../album/album'; 
import {ConnectService} from '../../providers/connect-service/connect-service'; 

@Component({ 
    templateUrl: 'build/pages/music/music.html', 
    providers: [ConnectService] 
}) 
export class MusicPage { 
    public releases: any; 
    private loading; 

    constructor(private navController: NavController, private connectService: ConnectService) { 
    this.loading = Loading.create(); 
    this.loadReleases(); 
    } 

    openModal(release) { 
    let modal = Modal.create(ModalsContentPage, release); 
    this.navController.present(modal); 
    } 

    goToOtherPage() { 
    //push another page onto the history stack 
    //causing the nav controller to animate the new page in 
    this.navController.push(AlbumPage); 
    } 

    loadReleases() { 
    this.navController.present(this.loading); 
    this.connectService.loadReleases() 
     .then(data => { 
     this.releases = data; 
     this.loading.dismiss(); 
     }); 
    } 
} 

Извинения, если вещи являются бит спагеттированный, я комментирую материал, пытаясь заставить разные методы работать.

Answer 1

Я не уверен, если я понимаю этот вопрос вы имеете, но вы можете указать, что делать, когда modal уволен, как это:

openModal(release) { 
    let modal = Modal.create(ModalsContentPage, release); 

    // New code 
    modal.onDismiss(data => { 
     this.playerService.setRelease(data); 
    }); 

    this.navController.present(modal); 
} 

Таким образом, когда modal уволен, вы все равно будете в состоянии сохранить данные с помощью этой службы. Вы можете найти более подробную информацию о Modal APIhere.

======================================

EDIT:

так же, как я уже говорил в комментариях, попробуйте следующее:

Вместо регистрации service как provider в Component:

@Component({ 
    templateUrl: './build/pages/player/player.html', 
    providers: [PlayerService, ...] 
}) 

Reg Истр его в ionicBootstrap из файла app.ts так:

ionicBootstrap(myApp, [PlayerService], {}); 

Таким образом, мы можем быть уверены, что тот же экземпляр службы будет использоваться во всем приложении (так, это будет singleton) ,

Answer 2

this.playerService.setRelease(this params get ('release')..); 
console.log(this playerService getStoredRelease()..);   // This works just after it is stored. 

Моя_служба:

setRelease (release) {this. release = release; GetStoredRelease}() {return this. free; } 

Answer 3

providers: [PlayerService, ConnectService] 

Эта строка создает новый экземпляр службы, в результате чего ваши переменные не инициализируются.

Мгновую активацию службы либо в вашей начальной загрузке, либо в строке поставщиков MusicPage. Затем загрузите службу, как и в своем конструкторе, для доступа к инстанцированной службе.