Question

我正在尝试将Ionic4标签栏添加到我的Ionic4应用程序，该标签栏工作正常，但是我需要链接到其中包含参数的url的选项卡之一，但我无法弄清楚。< / p>

我有几个标签-每个链接都指向一个静态页面-它们都可以使用，但是帐户标签需要链接以说/ 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);
  }

}

因此，当您点击“帐户”标签时，我会调用一种方法来提供正确的网址，例如/ tabs / member / johnsmith 只是似乎不起作用。尝试了各种路线，但无法绕开它。

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

谢谢

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>

Answer 2

您有解决问题的方法吗？

离子4标签按钮-使用网址/链接上的参数？

2 个答案: