angular - Ionic 4 Tab Button - 在 url/链接上使用参数？

Question

我正在尝试向我的 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 {}

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>

tabs.page.ts 文件:

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

}

因此，当您单击“帐户”选项卡时，我会调用一种方法来提供正确的网址，例如/标签/成员/约翰史密斯 只是似乎不起作用。尝试了各种路线，但无法理解。

如果有人可以提供任何建议，我们将不胜感激。

谢谢

Answer 1

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