I have code page.html to create tabs
<ion-tabs>
<ion-tab [root]="page1" [rootParams]="chatParams" tabTitle="Chat" tabIcon="chat"></ion-tab>
</ion-tabs>
and in page.ts is like below
export class samplePage {
page1: any = CarListPage;
page2: any = CarListPage;
page3: any = CarListPage;
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public bookingService: BookingProvider,
) {
}
when I open the page, the tab page is also displaying which is assigned in page.ts. Why it is displaying automatically without clicking that page could any please help me in this regard. It might be great help
Related
After setting back button text using config,
it does not reflect right away in nav bar.
Have to pop and push the page again.
playground:
https://stackblitz.com/edit/backbuttonbug.
you can see in contact page,
setting back button text does not reflect in self page and even in other nav stack
code:
previous page:
export class AboutPage {
constructor(public navCtrl: NavController) {}
contact() {
this.navCtrl.push(ContactPage);
}
}
Next page:
export class ContactPage {
constructor(public navCtrl: NavController,
public config: Config) {}
toChinese() {
this.config.set("backButtonText", '返回');
}
toEnglish() {
this.config.set("backButtonText", 'back');
}
}
<ion-header>
<ion-navbar>
<ion-title>
Contact
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<button ion-button (tap)="toChinese()">toChinese</button>
<button ion-button (tap)="toEnglish()">toEnglish</button>
</ion-content>
I suspect this is a bug and have opened a issue:
https://github.com/ionic-team/ionic-v3/issues/976.
and find another issue similar:
https://github.com/ionic-team/ionic/issues/7043
is that a ionic bug / my program bug?
hope to see advice
You haven't added any code so I'm not 100% sure of what you've tried already but try this:
import { ViewController } from 'ionic-angular';
...
ionViewDidEnter() {
this.viewCtrl.setBackButtonText('Some dynamic button text');
}
Edit
Sorry didn't see your Stackblitz example, this works:
import { Component } from '#angular/core';
import { NavController, Config, ViewController } from 'ionic-angular';
#Component({
selector: 'page-contact',
templateUrl: 'contact.html'
})
export class ContactPage {
constructor(public navCtrl: NavController,
public config: Config,
private viewCtrl: ViewController) {
}
toChinese() {
this.viewCtrl.setBackButtonText('返回');
}
toEnglish() {
this.viewCtrl.setBackButtonText('Back');
}
}
I am developing an ionic app with a side menu.
In my app, i added a modal that contains three button. When i click on any button in that modal, it opens a new page. On that new page, i have header containing a button that is used to open the side menu.
Problem
Side menu opens normally on any page that isn't opened via buttons on modal but when i try to open the side menu on a page that was opened via button on a modal, instead of opening the side menu on that page, it opens the side menu behind the current page and when i press back button to go back to previous page, side menu can be seen opened on the previous page.
Question
What is causing this behavior and how can i fix it ?
Custom Modal typescript code
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
import { LibraryPageSerice } from './libraryPage.service';
#IonicPage()
#Component({
selector: 'page-custom-posting-pop-up',
templateUrl: 'custom-posting-pop-up.html',
})
export class CustomPostingPopUpPage {
onLibraryPage: boolean;
constructor(private navCtrl: NavController, private navParams: NavParams,
private viewCtrl: ViewController,
private libService: LibraryPageSerice) {}
ionViewDidLoad() {
this.onLibraryPage = this.libService.onLibraryPage;
}
dismissModal(event) {
if(event.target.className === 'modal-container') {
this.viewCtrl.dismiss();
}
}
openCreationpage() {
this.viewCtrl.dismiss();
this.navCtrl.push('PostingCreationPage');
}
openSupportivePage() {
this.viewCtrl.dismiss();
this.navCtrl.push('PostingSupportivePage');
}
openLibraryPage() {
this.viewCtrl.dismiss();
this.navCtrl.push('MylibraryPage');
}
}
Custom modal html code
<div class="modal-container" (click)="dismissModal($event)">
<div class="modal">
<p>Posting Method</p>
<div class="btn-container">
<button class="creation-btn" (click)="openCreationpage()">My Creation</button>
<button class="supportive-btn" (click)="openSupportivePage()">Supportive</button>
<button *ngIf="!onLibraryPage" class="library-btn" (click)="openLibraryPage()">
My Library
</button>
</div>
</div>
</div>
This method is used to open the modal
posting() {
const modal = this.modalCtrl.create('CustomPostingPopUpPage');
modal.present();
}
If i don't use the modal and instead use an alert dialog to open the new page, side menu opens normally. So this problem only arises when i use a modal.
This is part of how modals are defined to work, "A Modal is a content pane that goes over the user's current page ... A modal uses the NavController to present itself in the root nav stack"
Because of this when you are calling this.navCtrl.push('PageName'); this instance of NavController is an Overlay Portal whereas a normal NavController not from a modal is a Nav. This will cause the page to be pushed along side your app-root (Which causes the results that you are witnessing).
Here are two solutions to this.
Pass in reference of NavController to your modal using NavParams
// home.ts
let modal = this.modalCtrl.create('ModalPage', {'nav': this.navCtrl});
// modal.ts
nav: Nav;
constructor(public navCtrl: NavController,
public navParams: NavParams,
public viewCtrl: ViewController) {
this.nav = this.navParams.get('nav');
}
openSupportivePage() {
this.viewCtrl.dismiss();
this.nav.push('PostingSupportivePage');
}
Or pass which page you want to open to viewCtrl.dismiss() and parse with onDidDismiss
// home.ts
modal.onDidDismiss((open_page) => {
if (open_page !== undefined && open_page.hasOwnProperty('open_page')) {
this.navCtrl.push(open_page['open_page']);
}
});
// modal.ts
openCreationpage() {
this.viewCtrl.dismiss({'open_page': 'PostingCreationPage'});
}
i want my App to check if a variable "myAccount" is on native storage to show or not Tabs, i used ionViewCanEnter to check if the variable myAccount is present on local Storage, if its not isConnected will be set to false, if its isConnected will be set to true
here's my code:
tabs.ts:
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { HomePage } from '../home/home';
import { NativeStorage } from '#ionic-native/native-storage';
import { MyaccountPage } from '../myaccount/myaccount';
/**
* Generated class for the TabsPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
#IonicPage()
#Component({
selector: 'page-tabs',
templateUrl: 'tabs.html',
})
export class TabsPage {
public isConnected: Boolean= true;
homeRoot = HomePage;
myAccountRoot = MyaccountPage;
rootPage = HomePage;
constructor(public navCtrl: NavController, public navParams: NavParams, private nativeStorage: NativeStorage) {
}
ionViewCanEnter(){
this.nativeStorage.getItem('myAccount')
.then(
//data => this.isConnected=false,
// error => this.isConnected=true
data => this.isConnected=true,
error => this.isConnected=false
);
}
logout(){
this.nativeStorage.remove('myAccount');
this.isConnected=false;
}
}
if isConnected is true it will show the tabs with HomePage as selectedIndex with the tabs visible, if its not it will show the HomePage with no Tabs
tabs.html:
<ion-tabs selectedIndex="0" *ngIf="isConnected" class="tabs-icon-top tabs-color-active-positive">
<ion-tab [root]="homeRoot" tabIcon="home"> </ion-tab>
<ion-tab [root]="myAccountRoot" tabIcon="person"></ion-tab>
<ion-tab [root]="myAccountRoot" tabIcon="chatbubbles"></ion-tab>
<ion-tab (ionSelect)="logout()" tabIcon="power"></ion-tab>
</ion-tabs>
<ion-nav [root]="rootPage" *ngIf="!isConnected">{{isConnected}}</ion-nav>
The probleme is that its not totally working, when myAccount is added to storage, the tabs doesnt show up but if i exit the application and relaunch it, they appear
used ionViewWillEnter and it worked
How to do a navCtrl.setRoot(Page) without the tabs?
I foun a solution for Ionic2 but can't find it to the version 3.
this.navCtrl.setRoot(LoginPage);
import { NavController, App } from 'ionic-angular';
constructor(public app: App){}
// On your method, add code below
this.app.getRootNav().setRoot(SigninPage)
To show your page without tabs you need to get root of your navCtrl by using getRootNav() method.
import { NavController, App } from 'ionic-angular';
constructor(public navCtrl: NavController, public app: App){
}
any_method(){
this.app.getRootNav(Page);
}
More details of this can be read from this documentation: Navigating from an overlay component
I'm starting out on creating my first app using Ionic 2 and through a lot of trial and error have got to a point where no number of Google searching can find anything to help.
I'm trying to pass some NavParams to a tab. The NavParams are available in the parent tabs page:
#Page({
templateUrl: 'build/pages/tabs/tabs.html'
})
export class TabsPage {
constructor(params: NavParams) {
this.params = params;
console.log(this.params); // returns NavParams {data: Object}
// this tells the tabs component which Pages should be each tab's root Page
this.tab1Root = Tab1;
this.tab2Root = Tab2;
this.tab3Root = Tab3;
}
}
But I cannot seem to get the NavParams within a tab itself:
#Page({
templateUrl: 'build/pages/tab1/tab1.html'
})
export class Tab1 {
constructor(nav: NavController, params: NavParams, platform: Platform) {
this.nav = nav;
this.params = params;
this.platform = platform;
console.log(this.params); // returns NavParams {data: null}
}
}
I'm just not entirely sure how to pass the params from the tabs page to the tab itself or somehow request a param from the tab parent. I assume something like:
this.tab1Root = Tab1(this.params);
Any help would be greatly appreciated!
This question is a few weeks old so you may have already found the answer. This feature was added in February: https://github.com/driftyco/ionic/issues/5475.
Taking the code from your original tab page, let's say a parameter is passed to the "parent" tab page and we want to store it in a property called fooId (this could be an object, or just a simple integer or string value, whatever):
#Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
constructor(params: NavParams) {
this.params = params;
console.log(this.params); // returns NavParams {data: Object}
this.fooId = this.params.data;
// this tells the tabs component which Pages should be each tab's root Page
this.tab1Root = Tab1;
this.tab2Root = Tab2;
this.tab3Root = Tab3;
}
}
Then in your tabs.html, you can reference it like this using the rootParams attribute (rootParams is referenced in the documenation here):
<ion-tabs>
<ion-tab tabTitle="Tab1" [root]="tab1Root" [rootParams]="fooId"></ion-tab>
<ion-tab tabTitle="Tab2" [root]="tab2Root" [rootParams]="fooId"></ion-tab>
<ion-tab tabTitle="Tab3" [root]="tab3Root" [rootParams]="fooId"></ion-tab>
</ion-tabs>
Then in your Tab1 page, you can reference your NavParams just like any other page and the value passed for foodId will be there.
For those who haven't figured out yet .....
I've searched a lot and the only answer I got was using native storage or using a service or session storage...but that wasn't what I wanted ...
So, If you have data in NavParams in Tabs.ts page and want to it pass as [rootParam] to respective Tabs...
then what you need to do is instead of assigning NavParams to a variable in Tabs.ts page what you can do is bind it directly to the [rootParams] in the HTML page.
Like ..
tabs.ts
constructor(public navParams: NavParams) { }
tabs.html
<ion-tab [root]="tab1Root" [rootParams]="navParams.get('single')" tabTitle="Customer"></ion-tab>
<ion-tab [root]="tab2Root" [rootParams]="navParams.get('second')" tabTitle="Map"></ion-tab>
Or
tabs.html
<ion-tab [root]="tab1Root" [rootParams]="navParams.data" tabTitle="Customer"></ion-tab>
tab1.ts
constructor( public navParams: NavParams) {}
ionViewDidLoad() {
console.log('ionViewDidLoad tab1Page');
console.log(this.navParams.data);
}
There is no direct way to pass Params in Tab-Pages that I know of.
I think you could play around with the NavController to make it work.
A neat workaround is to put the parameter into an injected service:
app/services/params.js:
import {Injectable} from 'angular2/core';
#Injectable()
export class Params{
constructor(){
console.log("Params()");
this.params={};
}
}
and in the controller:
import {Params} from '../../services/params'
#Page({
templateUrl: 'build/pages/home/home.html',
})
export class XYPage{
constructor(nav: NavController,platform: Platform, params: Params) {
console.log("XYPage()",this);
console.log("XYPage()", params.params);
params.params={id="001"};
dont forget to inject the service in your #App
I tried with many methods but none of them were helpful to me. As my application did not involve much of complexities, I implemented it using ionic native storage plugin. In the event that triggers the new tab page, I will store some variable in native storage(snippet is as below).
this.nativeStorage.setItem('myitem', {property: 'value', anotherProperty: 'anotherValue'})
.then(
() => console.log('Stored item!'),
error => console.error('Error storing item', error)
);
In the constructor or ionviewdidload page of the next tab page I will check for this variable and perform the required actions.Snippet is as below.
this.nativeStorage.getItem('myitem')
.then(
data => console.log(data),
error => console.error(error)
);
Note: This is suitable only for small application or where there is a requirement of passing limited set of variables. If there are lots of variable, it may take more space in the apps cache which may reduce the app performance.
tabs.html - add [rootParams]="paramName"; to the tab you want to pass data to
<ion-tabs>
<ion-tab tabTitle="Tab1" [root]="tab1Root" [rootParams]="fooId"></ion-tab>
<ion-tab tabTitle="Tab2" [root]="tab2Root"></ion-tab>
<ion-tab tabTitle="Tab3" [root]="tab3Root"></ion-tab>
</ion-tabs>
tabs.ts - set the key and data
export class TabsPage {
this.tab1Root = Tab1;
this.tab2Root = Tab2;
this.tab3Root = Tab3;
fooId: {
firstName: "lawlesscreation",
email: "user#email.com",
score: number // can also set it later in the constructor
}
constructor() {
let score = getScore(); //some method to get score
this.fooId.score = score;
}
}
tab1 page - import NavParams and use this.navParams.get(key) to get data
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
#IonicPage()
#Component({
selector: 'page-profile',
templateUrl: 'profile.html',
})
export class Tab1 {
firstName = this.navParams.get('firstName');
score = this.navParams.get('score');
userEmail = this.navParams.get('email');
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
}