2

我正在为我的前端 angular ionic 应用程序使用 ion-tabs。我正在使用嵌套选项卡，所以第一个离子选项卡有 3 个选项卡，选项卡 1、选项卡 2、功能选项卡和功能选项卡有 3 个选项卡，选项卡 4、选项卡 5、选项卡 6。我使用了 Angular 路由。

所以路线如下所示：

  1. 选项卡/选项卡1，
  2. 标签/标签2，
  3. 选项卡/功能选项卡/tab4，
  4. 选项卡/功能选项卡/tab5，
  5. 选项卡/功能选项卡/tab6

选择 feature-tabs 时的问题 Tab 4 默认情况下是活动路由，但 ion-tab-button 中的属性“tab”与路由中的路径（即 tab =“tab4”）保持相似时默认推荐选项卡 4 有效，但选择/单击选项卡会出现无法匹配任何路线的错误。URL 段：'tabs/tab1'。这意味着 ion-tab-button 的 'tab' 属性是指父选项卡。当我将 ion-tab-button 中的属性“tab”更改为“feature-tabs/tab4”（不推荐）时，一切正常，但 ion-tab-button 的 --color-selected CSS 属性不起作用. 但我的问题是为什么 tab 属性指的是专利选项卡，我如何才能引用子功能选项卡？

我已经厌倦了更改 CSS 属性，但它根本不起作用，

ion-tab-button{
--color-selected: #a0a;
}

这是我的标签路由，

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';


const routes: Routes = [
    {
        path: '',
        component: TabsPage,
        children: [
            {
                path: 'tab2',
                loadChildren: './../tab2/tab2.module#Tab2PageModule'
            },
            {
                path: 'tab1',
                children: [
                    {
                        path: '',
                        loadChildren: '../tab1/tab1.module#Tab1PageModule'
                    }
                        ]
                    }
                ]
            },

            {
                path: 'feature-tabs',
                loadChildren: '../feature-tabs/feature-tabs.module#FeatureTabsPageModule'
            },



            {
                path: '',
                redirectTo: './tabs/tab1',
                pathMatch: 'full'
            }

        ]
    },
    {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class TabsRoutingModule { }

这是标签 html，

<ion-content>
  <ion-tabs>
    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="tab1">
        <ion-label>Tab1</ion-label>
        <ion-icon name="pricetags"></ion-icon>
      </ion-tab-button>
      <ion-tab-button tab="tab2">
        <ion-label>Tab2</ion-label>
        <ion-icon name="podium"></ion-icon>
      </ion-tab-button>
      <ion-tab-button tab="feature-tabs">
        <ion-label>Feature tabs</ion-label>
        <ion-icon name="cash"></ion-icon>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-content>

这是我的功能选项卡路线：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FeatureTabsPage } from './feature-tabs.page';

const routes: Routes = [
    {
        path: '',
        component: FeatureTabsPage,
        children: [
            {
                path: 'tab4',
                children: [
                    {
                        path: '',
                        loadChildren: './../tab4/tab4.module#Tab4PageModule'
                    }
                ]
            },
            {
                path: 'tab5',
                children: [
                    {
                        path: '',
                        loadChildren: './../tab5/tab5.module#Tab5PageModule'
                    }
                ]
            },
            {
                path: 'tab6',
                children: [
                    {
                        path: '',
                        loadChildren: './../tab6/tab6.module#Tab6PageModule'
                    }
                ]
            },
            {
                path: '',
                redirectTo: '/tabs/feature-tabs/tab4',
                pathMatch: 'full'
            }
        ]
    },
    {
        path: '',
        redirectTo: '/tabs/feature-tabs/tab4',
        pathMatch: 'full'
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class FeatureTabsRoutingModule {}

这是功能选项卡的 html：

<ion-content>
  <ion-tabs>
    <ion-tab-bar slot="top">
      <ion-tab-button tab="tab4">
        <ion-icon name="calendar"></ion-icon>
        <ion-label>tab4</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="tab5">
        <ion-icon name="contacts"></ion-icon>
        <ion-label>tab5</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="tab6">
        <ion-icon name="information-circle"></ion-icon>
        <ion-label>tab6</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-content>
4

0 回答 0