Ionic 4 Tab Button - использовать параметры в ссылке / ссылке? - PullRequest
Новая
       33

Ionic 4 Tab Button - использовать параметры в ссылке / ссылке?

2 голосов
/ 30 апреля 2019

Я пытаюсь добавить панель вкладок 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 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: 

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

}

Поэтому, когда вы нажимаете на вкладку «Учетная запись», я вызываю метод для предоставления правильного URL, например, / Закладки / член / JohnSmith Просто не похоже на работу. Пробовал разные маршруты, но не могу обойти это.

Если кто-то может предложить какой-либо совет, будет высоко ценится.

Спасибо

1 Ответ

1 голос
/ 13 мая 2019

В файле 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>
...