Need help with adding a new tab to your project using lazy-loading?
You can utilize the @IonicPage decorator for setting up a page as the root of a tab.
To implement this, create a new page:
// module
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { UsersPage } from './users';
@NgModule({
declarations: [
UsersPage,
],
imports: [
IonicPageModule.forChild(UsersPage),
],
})
export class UsersPageModule {}
// page
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-users',
templateUrl: 'users.html',
})
export class UsersPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad UsersPage');
}
}
Now, integrate this new page in your tabs setup:
// tabs.ts
export class TabsPage {
@ViewChild(Tabs) tabs: Tabs;
@ViewChild('findTab') findTab: ElementRef;
// Define the Pages that will be used as roots for each tab
tab1Root: any = HomePage;
tab2Root: any = FindPage;
usersPage: any = "UsersPageModule";
tab4Root: any = ChatsPage;
findTabParams: any = {};
subscriptions: any[] = [];
totalUnreadMessages: FirebaseObjectObservable<any>;
unread: boolean;
anyUnread: boolean;
...
// tabs.html
<ion-tabs #tabs>
<ion-tab [root]="tab1Root" tabIcon="home"></ion-tab>
<ion-tab #findTab [root]="tab2Root" [rootParams]="findTabParams" tabIcon="calendar"></ion-tab>
<ion-tab [root]="usersPage" tabIcon="person"></ion-tab>
<ion-tab [root]="tab4Root" tabIcon="chatbubbles" [tabBadge]="unread?1:null" [tabsHideOnSubPages]=true></ion-tab>
</ion-tabs>
Encountering an error message like "Uncaught (in promise): invalid link: UsersPageModule", even after re-running ionic serve?