I have a page that loads up a modal window for someone to select an option. Then I have the modal.onDidDismiss function setup in the parent page to navigate to the new page depending on what the user selects in the modal window. The problem is, whenever the page is navigated to, the URL becomes all messed up.
Example, my page is loaded in tabs, there are 5 tabs, clicking on any one of the tabs the URL will stay as “http://localhost:8100” no changes what so ever. Then when someone clicks an option in the modal window the URL becomes something like “http://localhost:8100/#/tabs/t0/chat/private-chat” I can’t seem to figure out why the URL changes when navigating this way. It doesn’t change anywhere else and it is causing problems. Every time I change anything in the code while testing, the page reloads like it should, but it reloads to the new messed up URL and I have to erase the URL and start over. Here is an example of the code I am running that causes this issue…
Chat.ts…
import { Component, NgZone, ViewChild } from '@angular/core';
import { ModalController, IonicPage, NavController, NavParams } from 'ionic-angular';
import { ChatProvider } from '../../providers/chat/chat';
import { DataProvider } from '../../providers/data/data';
import { ChatMessage } from '../../models/chat-message';
import { User } from '@ionic/cloud-angular';
import { ChatModalPage } from '../chat-modal/chat-modal';
import { ChannelChatPage} from '../channel-chat/channel-chat';
/**
* Generated class for the ChatPage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-chat',
templateUrl: 'chat.html',
})
export class ChatPage {
@ViewChild('chat') chatter: any;
messages: any;
zone: NgZone;
chatBox: string;
following: any;
followers: any;
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public chat: ChatProvider,
public user: User,
public modalCtrl: ModalController,
public data: DataProvider
) {
this.chat.initialize();
this.messages = [];
this.zone = new NgZone({enableLongStackTrace: false});
this.chatBox = '';
this.chat.socketService.subscribe(event => {
if(event.category === 'message') {
this.zone.run(() => {
this.messages.push(event.message);
});
}
});
}
formatMessage(msg: string) {
if(msg) {
let chatMessage: ChatMessage = {
to: 'recipient',
from: this.user.details.username,
message: msg,
channel: 'channel'
};
return chatMessage;
}
return null;
}
send(message) {
let newMsg = this.formatMessage(message);
if(newMsg) {
this.chat.sendMessage(newMsg);
this.messages.push(newMsg);
}
this.chatBox = '';
}
ionViewDidLoad() {
}
startPrivateChat(user_id) {
this.chat.joinPrivateChat(user_id).then(data => {
this.navCtrl.push(ChannelChatPage, {channel: data});
});
}
showMenu(type: string, fab) {
switch(type) {
case 'channels':
this.showChannelsMenu();
break;
case 'private':
this.showPrivateMenu();
break;
case 'start':
this.showNewChatMenu();
break;
default:
this.showChannelsMenu();
break;
}
fab.close();
}
showChannelsMenu() {
this.chat.getChannels().then(data => {
let modal = this.modalCtrl.create(ChatModalPage, {type: 'channels', items: data});
modal.present();
modal.onDidDismiss(data => {
if(data) {
console.log("Modal Dismissed. Heres the Data:");
console.log(data);
this.navCtrl.push(data.page, data.pageData);
}
});
});
}
showPrivateMenu() {
this.chat.getPrivateMessageChannels().then(data => {
let modal = this.modalCtrl.create(ChatModalPage, {type: 'private', items: data});
modal.present();
modal.onDidDismiss(data => {
if(data) {
console.log("Modal Dismissed. Heres the Data:");
console.log(data);
this.navCtrl.push(data.page, data.pageData);
}
})
})
}
showNewChatMenu() {
let followers = this.user.get('followers', []);
let following = this.user.get('following', []);
console.log("Followers: ", followers);
console.log("following: ", following);
this.data.retrieveUsers([followers, following]).then(data => {
let newFollowing = data[0], newFollowers = data[1];
// for(let index in data[0]) {
// newFollowing.push(data[0][index]);
// }
// for(let ind in data[1]) {
// newFollowers.push(data[1][ind]);
// }
let modal = this.modalCtrl.create(ChatModalPage, {type: 'newChat', items: {following: newFollowing, followers: newFollowers}});
modal.present();
modal.onDidDismiss(data => {
if(data) {
console.log("Modal Dismissed. Heres the Data:");
console.log(data);
this.navCtrl.push(data.page, data.pageData);
}
})
})
}
}
So, I have the “showMenu” function that is responsible for setting up the options that go to the “ChatModal” page, that way I only have to have one chatmodal and it can just change the options depending on which the user clicks. Each of the functions has a “modal.onDidDismiss” function that just pushes the correct page to “this.navCtrl”. Inside the chat modal page is very simple, just a view page with the options. Each of the options has a (click) event that is either “joinChannel” or “joinPrivateChannel” which call the function…
this.viewCtrl.dismiss({page: "SELECTEDPAGEHERE", pageData: {channel: "CHANNEL RECIEVED FROM SERVER"});
That way the navigation stays on the correct page and not from the modal page. However, for some reason every time I click an option it changes the URL, which doesn’t happen in any other place. I am using “this.navCtrl.push(…)” in many places throughout my app with no problems what so ever. It is just this modal thing, whenever I click an option, it calls dismiss on the modal and passes data back to the chat page, which calls this.navCtrl.push(…); however the URL gets changed to some weird stuff like “http://localhost:8100/#/tabs/t0/chat/channel-chat” Is there any possible way to stop that from happening and leave the URL alone? Thank you.
P.S. If you need to see more of the code and display pages please ask, I will be more than happy to provide them, I was just trying to keep my post from being too long. Thank you.