I try to push a new page with tabs in my app. However, I found when I click the button (add friends), the new page popup from right side and the background page suddenly disappears. when I click back button on the top left in new page(component). you will find that the background layer only shows white, and after the new page closing completely, the welcome page shows again.
example:
you can see my code below:
Here is the code if you need: https://stackblitz.com/edit/ionic-mfc3ga
open the link in Chrome
clicking "open in new window" on the top right of the page.
In new window, open development tools(Chrome) and switch to mobile model(toggle device toolbar) and please refresh the browser.
clicking the "add friend button" on the top right.
you will see the background page(Welcome to Ionic) disappearing when the new page slides from right to left.
In addition, when you click back button on the top left in new page(component). you will find that the background layer only shows
white, and after the new page closing completely, the welcome page
shows again.
I have no idea what's wrong with my code.
Thanks Everyone
delete import { AboutPage } from '../about/about'; to AboutPage
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
// import { AboutPage } from '../about/about'; DELETE THIS
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
#Component({
selector: 'page-about',
templateUrl: 'about.html'
})
export class AboutPage {
tab1Root = HomePage;
// tab2Root = AboutPage;
tab3Root = ContactPage;
constructor(public navCtrl: NavController) {
}
}
in app.module.ts
remove: AboutPage, ContactPage, HomePage, TabsPage on =>> entryComponents
entryComponents: [
MyApp,
],
and it works well ))
Related
I have a simple login form and every time that I hit the input, the keyboard pushes all my components, and what I want is that the keyboard stays on top as "absolute position".
Things that I have already tried:
.css
ion-grid {
min-height: 100%;
}
.ts
keyboard.disableScroll(true);
app.module.ts
imports: [
IonicModule.forRoot(MyApp, {
scrollAssist: false,
autoFocusAssist: false)
}
]
So I don't want the keyboard to push the content, just stay on top of the screen, even that stay over the buttons.
Remove keyboard plugin and add it again
Add this to app.module.ts
IonicModule.forRoot(MyApp, { scrollAssist: false, autoFocusAssist: false }),
and this to app.component.ts
import { Keyboard } from '#ionic-native/keyboard';
constructor(
public platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private keyboard: Keyboard
)
initializeApp() {
this.keyboard.disableScroll(false);
}
I found the error. The problem is that I was testing the app in web view and of course, cordova component doesn't work on web view. So I generated the apk and test in a android phone. So that's it! Thanks #user9088454
I want to know which function is called when we click ion-navbar back button by default in ionic 3.
I want to call the same function on hardware back button click.
You can use registerBackButtonAction of Platform Service.
You can override hardware back button action as below inside app.component.ts.
Remember to call registerBackButtonAction after Platform.ready().
import { Platform, App } from 'ionic-angular';
#Component({
templateUrl: 'app.html'
})
export class MyApp {
constructor(public platform: Platform, private app: App) {
this.platform.ready().then(() => {
this.platform.registerBackButtonAction(() => {
let nav = this.app.getActiveNav()
if (nav.canGoBack()) {
// If there are pages in navigation stack go one page back
// You can change this according to your requirement
nav.pop();
} else {
// If there are no pages in navigation stack you can show a message to app user
console.log("You cannot go back");
// Or else you can exit from the app
this.platform.exitApp();
}
});
});
}
}
Hope this will help you.
I have a problem where when I call this.viewCtrl.dismiss(); and this.navCtrl.push(HomePage); in my function, the tabs at the bottom of the page disappear
So I have 3 pages/modal:
page1: home page, page2: modal, page3: second page
I navigate from my home page to the modal which has two actions(accept or reject)
If the user accepts then go to the second page, if the use rejects then go back to the home page. When the user accepts everything works as expected however if the user rejects then the app hides the tabs at the bottom of the page
My code for the reject button navigation is as follows
Modal page
gotoHome(){
this.viewCtrl.dismiss();
this.navCtrl.push(HomePage);
}
Second page
calling modal in constructor
constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController, public storage: Storage) {
let myModal = this.modalCtrl.create(modal);
myModal.present();
}
My TabsPage is default as per Ionics Tabs Layout App
You don't need to push the homepage from the modal since, you said, you are going back to homepage.
Change in modal.ts
gotoHome(){
this.viewCtrl.dismiss();
this.navCtrl.push(HomePage);
}
to
accepted: boolean;
....
accept(){
this.accepted = true;
this.dismiss();
}
reject(){
this.accepted = false;
this.dismiss();
}
dismiss(){
this.viewCtrl.dismiss(this.accepted);
}
Call the accept() when accepted and reject() when rejected
Handle your actions after dismissing view by
let myModal = this.modalCtrl.create(modal);
myModal.onDidDismiss( accepted => {
// your actions here
console.log(accepted);
if(accepted){
this.navCtrl.push(SecondPage);
}
});
myModal.present();
I created an example here on stackblitz
In my app I have 3 tabs. In the first tab there is a list that pushes to another page (inside the same tab, so the tabs remain at the bottom). When I switch to another tab, and I go back then to the first tab I am still at that subpage.
Is there a way to go always to the root. The problem is that inside the child-page I have also links, so the solution on Ionic 2 - How do I get back to the start page of a given tab did not work for me, as he redirects me also to the root when I click open a new page in the child.
Any other solutions?
I'm not sure if this would be the best way to fix that, but it should work. Suppose this is the page that contains all the tabs:
<ion-tabs>
<ion-tab [root]="chatRoot" (ionSelect)="onSelected(0)" tabTitle="First tab"></ion-tab>
<ion-tab [root]="chatRoot" (ionSelect)="onSelected(1)" tabTitle="First tab"></ion-tab>
<ion-tab [root]="chatRoot" (ionSelect)="onSelected(2)" tabTitle="First tab"></ion-tab>
</ion-tabs>
And in the component code:
import { Events } from 'ionic-angular';
// ...
constructor(public events: Events) {}
public onSelected(index: number): void {
if(index) this.events.publish('TabSelected');
}
So basically, we're publishing an event when the user selects any tab other than the first tab (index equal to 0).
The in the FirstTab, we can subscribe to that event, and use this.navCtrl.popToRoot() to close the opened pages inside of that tab:
// FirstTabCode
import { NavController, Events } from 'ionic-angular';
// ...
constructor(public navCtrl: NavController, public events: Events) {
this.events.subscribe('TabSelected', () => { this.navCtrl.popToRoot(); });
}
ngOnDestroy() {
this.events.unsubscribe('TabSelected');
}
I am using tabbed view in my Ionic 2 RC0 App. When I do this.nav.push the new page is getting opened in the tab instead of opening as a new page? What am I doing wrong here?
export class Tab1Page {
constructor(public nav: NavController) {
}
editRecord(index){
this.nav.push(MyCustomPage, {indexoEdit: index});
}
}
If you do not want to see tabs when navigating to a subpage then set tabsHideOnSubPages to true in your config. See the docs below:
https://ionicframework.com/docs/v2/api/config/Config/
You can try in this way
constructor(public nav: NavController,private app: App) {
}
editRecord(index){
this.app.getRootNav().push(MyCustomPage, {indexoEdit: index});
}