Random Page Select

Ionic Framework ionic-v3
1

I have 200 plus pages of stories and poems contained in my App. I have setup buttons so that a user can browse through these pages and select something to read, but I also want want to enable the user to press a READ NOW button on the main menu to randomly select any story/poem to read immediately. I have numbered my pages mcw1 through to mcw203 with the idea of pressing the READ NOW button to generate a random number in the 1 - 206 and then that numbered page is displayed. I am new to ionic and java script and would therefore appreciate hints or guidance into how I might achieve this. Thanks in advance.

2

This is going to be considerably easier if you are using @IonicPage lazy loading, and it sounds like your app is one of the ones that would probably benefit from it.

export class RandomPageService {
  wheel = new Subject<string>();
  
  spin(): void {
    let page = 'mcw' + Math.floor(Math.random()*204).toString();
    this.wheel.next(page);
  }
}

export class MyApp {
  rootPage: string;
  constructor(rps: RandomPageService) {
    rps.wheel.subscribe(pn => this.rootPage = pn);
  }
}

export class WhateverPage {
  constructor(private _rps: RandomPageService) {}
  onReadNowButtonClicked(): void {
    this.rps.spin();
  }
}
3

I wanted to confirm which page this code gets inserted into, as my button resides in home is it home.ts?

4

The bit that changes the root page must be in the app component, but the triggering (WhateverPage) can be done from anywhere that injects the RandomPageService.

5

Sorry to be a nuisance but still having trouble placing the code. Here is my app.component.ts Could you mark up for correct placement.

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@Component({
  templateUrl: 'app.html'
})


export class MyApp {
  rootPage:any = 'TabsPage';

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

Also could not work out how to other exports. See below home.ts where current pushes are, I resume somehow I must fit the 2 other exports in here but for the life of me can not work it out. Sorry to be so stupid… FYI openIssue1 - 4 are set for browsing and mcw3Page pushes to an existing page, I want to push to the random page, is this done by a variable or …?

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-home-page',
  templateUrl: 'home.html',
  
})
export class HomePage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  
}

  navigateToReadnowPage() {
    this.navCtrl.push('mcw3Page');
  }
  openIssue1() {
    this.navCtrl.push('Issue1Page');
  }
  openIssue2() {
    this.navCtrl.push('Issue2Page');
  }
  openIssue3() {
    this.navCtrl.push('Issue3Page');
  }
  openIssue4() {
    this.navCtrl.push('Issue4Page');
  }
}
6

Please edit your post and use the </> button above the post input field to format your code or error message or wrap it in ``` (“code fences”) manually. This will make sure your text is readable and if it recognizes the programming language it also automatically adds code syntax highlighting. Thanks.

7

Thanks for that, I hope it is right now…

1 Like
8

Please help, I have tried to setup the random page selector from what rapropos suggested but have got stuck with the below error:

Close
Typescript Error
Cannot find name ‘Subject’.
src/pages/home/home.ts
wheel = new Subject();

The code I used is shown below - I tried looking up the offending line:
wheel = new Subject(); in home.ts file but could not work out what was wrong. I am new to this so any help would be appreciated.

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-home-page',
  templateUrl: 'home.html',
  
})
export class RandomPageService {

  constructor(public navCtrl: NavController, public navParams: NavParams, private rps: RandomPageService) { 
  }

 wheel = new Subject<string>();

  spin(): void {
    let page = 'mcw' + Math.floor(Math.random()*54).toString();
    this.wheel.next(page);
  }

  onQuickReadNowButtonClicked(): void {
    this.rps.spin();
  }

  //navigateToReadnowPage() {
  //  this.navCtrl.push('mcw6');
  //}
  openIssue1() {
    this.navCtrl.push('Issue1Page');
  }
  openIssue2() {
    this.navCtrl.push('Issue2Page');
  }
  openIssue3() {
    this.navCtrl.push('Issue3Page');
  }
  openIssue4() {
    this.navCtrl.push('Issue4Page');
  }
}

The associated code in home.module.ts is:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { RandomPageService } from './home';

@NgModule({
  declarations: [
    RandomPageService,
  ],
  imports: [
    IonicPageModule.forChild(RandomPageService),
  ],
  exports: [
    RandomPageService
  ]
})
export class RandomPageServiceModule {}

And app.components.ts:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { RandomPageService } from '../pages/home/home';

@Component({
  templateUrl: 'app.html'
})


export class MyApp {
  rootPage:any = 'TabsPage';

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, rps: RandomPageService) {
    rps.wheel.subscribe(pn=> this.rootPage = pn);
    platform.ready().then(() => {
     statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}