name Property not working in ion-tabs - ionic-framework

Question

I have created a tabs project in ionic, And created deeplinks for About and Home pages which are also tabs.
I need to set the name but while setting the name the following result occur:
Issue1: url does not displays the name.
Issue2 : When I refresh the page with given url the tabs also disappears.
In tabs.html I have set <ion-tabs name="tabspage">
tabs.ts
import { Component } from '#angular/core';
import { ContactPage } from '../contact/contact';
#Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
tab1Root = 'HomePage';
tab2Root = 'AboutPage';
tab3Root = ContactPage;
constructor() {
}
}
tabs.html
<ion-tabs name="tabshome">
<ion-tab [root]="tab1Root" tabUrlPath="tab1" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>
about.ts
import { Component } from '#angular/core';
import { NavController, IonicPage } from 'ionic-angular';
#IonicPage({
segment: 'about/:id'
})
#Component({
selector: 'page-about',
templateUrl: 'about.html'
})
export class AboutPage {
constructor(public navCtrl: NavController) {
}
}
home.ts
import { Component } from '#angular/core';
import { NavController, IonicPage } from 'ionic-angular';
#IonicPage({
segment: 'home'
})
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {
}
}
My git hub link is https://github.com/jainAdijain/myTabs.git

Answer 1

Need to change in tabs.ts And use tabs to deeplinks:
import { Component } from '#angular/core';
import { IonicPage } from 'ionic-angular';
import {ContactPage} from "../contact/contact";
#IonicPage({
name: 'page-tabs',
priority: 'high'})
#Component({
selector: 'page-tabs',
templateUrl: 'tabs.html',
})
export class TabsPage {
tab1Root='page-home';
tab2Root = 'page-about';
tab3Root = ContactPage;
constructor() {
}
}
Need to change app.component.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';
#Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any ='page-tabs';
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
});
}
}
tabs.html remain same.
Need to change in about.ts
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
#IonicPage({
segment: 'about/:id',
name: 'page-about'
})
#Component({
selector: 'page-about',
templateUrl: 'about.html',
})
export class AboutPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad AboutPage');
}
}
Need to change home.ts
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
#IonicPage({
segment: 'home',
name: 'page-home'
})
#Component({
selector: 'page-home',
templateUrl: 'home.html',
})
export class HomePage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewWillEnter() {
}
}
Also need to update app.module.ts
import { NgModule, ErrorHandler } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { ContactPage } from '../pages/contact/contact';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
#NgModule({
declarations: [
MyApp,
ContactPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
ContactPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}