name Property not working in ion-tabs

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 {}