Angular 无法将选项卡设置为4中的2页
我在我的Ionic 4应用程序中工作,我添加了标签主题,我希望其中一个标签可以作为2个路由,例如当用户未登录时,登录页面将打开,当用户登录时,帐户页面将打开 这是我的标签.router.module.ts:Angular 无法将选项卡设置为4中的2页,angular,ionic-framework,angular-routing,ionic4,Angular,Ionic Framework,Angular Routing,Ionic4,我在我的Ionic 4应用程序中工作,我添加了标签主题,我希望其中一个标签可以作为2个路由,例如当用户未登录时,登录页面将打开,当用户登录时,帐户页面将打开 这是我的标签.router.module.ts: import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { TabsPage } from './tabs.page'; import {
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
import { AuthenticationGuard } from '../guards/authentication.guard';
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'tab1',
children: [
{
path: '',
loadChildren: '../tab1/tab1.module#Tab1PageModule'
}
]
},
{
path: 'tab2',
canActivate: [AuthenticationGuard],
children: [
{
path: '',
loadChildren: '../tab2/tab2.module#Tab2PageModule'
}
]
},
{
path: 'tab2/:id',
canActivate: [AuthenticationGuard],
children: [
{
path: '',
loadChildren: '../tab2/tab2.module#Tab2PageModule'
}
]
},
{
path: 'acceptchallenge',
children: [
{
path: '',
loadChildren: '../acceptchallenge/acceptchallenge.module#AcceptchallengePageModule'
}
]
},
{
path: 'tab3',
children: [
{
path: '',
loadChildren: '../tab3/tab3.module#Tab3PageModule'
},
{
path: '/login',
loadChildren: '../login/login.module#LoginPageModule'
}
]
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
];
@NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}
我想使用tab3在用户未登录时打开登录页面,在用户登录时打开帐户页面
因此,我必须添加任何canActivate
,才能使其工作
非常感谢您的帮助。在
选项卡内。html
您可以使用*ngIf在用户登录或注销时显示选项卡。拿一个bool或者你可以使用的任何逻辑,像这样显示在你的标签页上
<ion-tab-bar slot="bottom">
<ion-tab-button tab="profile" *ngIf="userLogin == true">
<ion-icon name="person"></ion-icon>
<ion-label>Profile</ion-label>
</ion-tab-button>
<ion-tab-button tab="login" *ngIf="userLogin == false">
<ion-icon name="settings"></ion-icon>
<ion-label>Login</ion-label>
</ion-tab-button>
</ion-tab-bar>
轮廓
登录
在选项卡内.html
您可以使用*ngIf在用户登录或注销时显示选项卡。拿一个bool或者你可以使用的任何逻辑,像这样显示在你的标签页上
<ion-tab-bar slot="bottom">
<ion-tab-button tab="profile" *ngIf="userLogin == true">
<ion-icon name="person"></ion-icon>
<ion-label>Profile</ion-label>
</ion-tab-button>
<ion-tab-button tab="login" *ngIf="userLogin == false">
<ion-icon name="settings"></ion-icon>
<ion-label>Login</ion-label>
</ion-tab-button>
</ion-tab-bar>
轮廓
登录
我建议建立一个登录页面,一旦通过身份验证,就直接进入选项卡结构,将帐户页面设置为root。@JayOrdway。我有一个登录页面,一旦验证,它将重定向到选项卡页面,但问题是,当用户打开登录页面时,没有返回按钮吗?那么,你能帮我吗?没有注销功能,不要进入你的登录页面。如果用户注销,则将用户重定向到登录页面。但不要让他们在没有注销功能的情况下进入登录页面。@Najamussaqib。是的,这正在发生。当用户未登录时,他可以访问登录页面,当用户登录时,他不能访问登录页面,但我想在选项卡3上显示登录页面,在选项卡3上也显示帐户页面。我建议创建一个登录页面,并在验证后直接到您的选项卡结构,将帐户页面设置为root。@JayOrdway。我有一个登录页面,一旦验证,它将重定向到选项卡页面,但问题是,当用户打开登录页面时,没有返回按钮吗?那么,你能帮我吗?没有注销功能,不要进入你的登录页面。如果用户注销,则将用户重定向到登录页面。但不要让他们在没有注销功能的情况下进入登录页面。@Najamussaqib。是的,这正在发生。当用户未登录时,他可以访问登录页面,当用户登录时,他不能访问登录页面,但我想在选项卡3上显示登录页面,在选项卡3上显示帐户页面。