Angular 离子4选项卡按钮-使用url/链接上的参数？

我正试图在我的Ionic4应用程序中添加一个Ionic4选项卡栏，这很好，但其中一个选项卡需要链接到一个url，该url中有参数，我就是想不出来

我有几个选项卡-每个链接到一个静态页面-它们都可以工作，但帐户选项卡需要链接到/tabs/member/johnsmith（johnsmith是参数）

tabs.module.ts文件：

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

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);
  }

}

tabs.page.html文件：

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

因此，当您单击Account选项卡时，我会调用一个方法来提供正确的url，例如/tabs/member/johnsmith 只是好像不管用。尝试了各种路线，但我的头脑还是绕不过去

如果有人能提供任何建议，我将不胜感激

---

感谢您在tabs.page.ts文件中将方法定义为

userName = ''; 

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

在tabs.page.html文件中：将选项卡导航定义为

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

账户

谢谢Mamta的回答。这很有效，并链接到会员档案。非常好。唯一的一个小问题是，它在成员页面上没有突出显示选项卡图标。不确定这是否可能实现？其他选项卡在显示其页面时高亮显示。