Ionic 2 でモーダルを使用して、音楽プレーヤーに似た操作を行っています。このモーダル内で、モーダルが閉じて新しいモーダルが作成された場合でも保持したいいくつかの変数を設定しています。データを永続化するために、Angular 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();Ionic を使用してモーダルを呼び出して再度開くと、
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();
}
}
player-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();
});
}
}
物事が少しスパゲティ化されている場合はお詫びします。さまざまな手法を機能させるためにコメントアウトしています。