CODEWITHSUNDEEP
angularangular-routingionic4
Rowie
Rowie

Reputation: 313

Ionic 4 Tab Button - using parameters on the url/link?

I'm trying to add an Ionic4 tab bar to my Ionic4 app which works fine, but one of the tabs I need to link to a url that has parameters in the url and I just can't figure it out.

I have several tabs - each link to a static page - they all work but the account tab needs to link to say /tabs/member/johnsmith (johnsmith being the parameter)

tabs.module.ts file:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'newsfeed',
        loadChildren: '../newsfeed/newsfeed.module#NewsfeedPageModule'
      },
      {
        path: 'notifications',
        loadChildren: '../notifications/notifications.module#NotificationsPageModule'
      },
      {
        path: 'member',
        children:[
          {
            path: ':id',
            loadChildren: '../member-profile/member-profile.module#MemberProfilePageModule'
          }
        ]
      },    
      {
        path: 'settings'
      },
      {
        path: '',
        redirectTo: '/tabs/newsfeed',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/newsfeed',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [TabsPage]
})
export class TabsPageModule {}

tabs.page.html file:

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="newsfeed">
      <ion-icon name="list-box"></ion-icon>
      <ion-label>feed</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="notifications">
      <ion-icon name="notifications-outline"></ion-icon>
      <ion-label>notifications</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="member" (click)="goProfile()">
      <ion-icon name="person"></ion-icon>
      <ion-label>account</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="settings">
      <ion-icon name="settings"></ion-icon>
      <ion-label>options</ion-label>
    </ion-tab-button>

  </ion-tab-bar>
</ion-tabs>

tabs.page.ts file:

import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';
import { Globals } from 'src/app/classes/globals';
import { Router } from '@angular/router';

@Component({
  selector: 'app-tabs',
  templateUrl: './tabs.page.html',
  styleUrls: ['./tabs.page.scss'],
})
export class TabsPage implements OnInit {

  constructor(
    private router: Router,
    private navCtrl: NavController,
    private globals: Globals,
  ) { }

  ngOnInit() {
  }

  goProfile() {
    console.log('/tabs/member/' + this.globals.userSettings.UserDetails.UserName);
    this.router.navigateByUrl('/tabs/member/' + this.globals.userSettings.UserDetails.UserName)
    //this.navCtrl.navigateRoot('member/' + this.globals.userSettings.UserDetails.UserName);
  }

}

So when you click on the Account tab I call a method to provide the correct url e.g. /tabs/member/johnsmith Just doesn't seem to work. Tried various routes but can't get my head around it.

If anyone can offer any advice be much appreciated.

Thanks

Upvotes: 3

Views: 3391

Answers (1)

Mamta
Mamta

Reputation: 66

In tabs.page.ts file define method as 

userName = ''; 

ionViewDidEnter(){ 
   this.userName =  this.globals.userSettings.UserDetails.UserName; 
}

In tabs.page.html file: define tab navigation as 

<ion-tab-button tab="member/{{userName}} ">
    <ion-icon name="person"></ion-icon>
    <ion-label>account</ion-label>
</ion-tab-button>

Upvotes: 4

Related Questions