我在前端角离子应用程序中使用了离子标签。我使用的是嵌套选项卡,因此第一个离子选项卡具有3个选项卡,即选项卡1,选项卡2,功能选项卡,而功能选项卡具有3个选项卡,即选项卡4,选项卡5,选项卡6。我使用了角度布线。
所以路线如下:
选择特征选项卡时的问题选项卡4默认情况下是活动路线,但离子-选项卡按钮中的属性“选项卡”在布线时保持类似于路径(即选项卡=“ tab4”)的情况。默认值如建议的那样选项卡4可以工作,但是选择/单击选项卡会产生“无法匹配任何路由”错误。网址段:“ tabs / tab1”。这意味着ion-tab-button的'tab'属性是指父级选项卡。当我将ion-tab-button的属性'tab'更改为“ feature-tabs / tab4”(不推荐)时,一切正常,但是ion-tab-button的--color-selected CSS属性不起作用。但是我的问题是,为什么选项卡属性引用专利标签,而我又该如何引用子功能标签呢?
我已经厌倦了更改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>