如何隐藏离子4选项卡只是为登录页面
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何隐藏离子4选项卡只是为登录页面相关的知识,希望对你有一定的参考价值。
我正在开发一个带有标签的项目,但它应该只在用户登录后出现。
当app.routing.module.ts中的路由如下所示时,标签工作正常:
{ path: '', loadChildren: './tabs/tabs.module#TabsPageModule' }
但是当我像这样使用登录时:
{ path: '', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'home', loadChildren: './tabs/tabs.module#TabsPageModule' }
它不起作用。
app.routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: '', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'home', loadChildren: './tabs/tabs.module#TabsPageModule' },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
tabs.routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [
{
path: 'home',
component: TabsPage,
children: [
{
path: '',
redirectTo: '/home/(MyPlaces:MyPlaces)',
pathMatch: 'full'
},
{
path: 'MyPlaces',
outlet: 'MyPlaces',
loadChildren: '../MyPlaces/MyPlaces.module#MyPlacesPageModule'
},
{
path: 'Messages',
outlet: 'Messages',
loadChildren: '../Messages/Messages.module#MessagesPageModule'
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabsPageRoutingModule { }
答案
导入TabsPageModule并将其放在app.module.ts
上imports: [...]
。这适合我。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TabsPageModule } from './tabs/tabs.module';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, TabsPageModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
另一答案
经过这么多的尝试后,我发现这种方法永远不会像以前一样工作至少现在这个工作的唯一方法是不使用延迟加载代码就是这样:
app.routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TabsPage } from './tabs/tabs.page'
const routes: Routes = [
{ path: '', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'home', component: TabsPage },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TabsPageModule } from './tabs/tabs.module';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
TabsPageModule
],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule { }
请注意导入TabsPageModule。
tabs.routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
import { MyPlacePage } from '../MyPlaces/MyPlaces.Page';
import { MessagesPage } from '../Messages/Messages.Page';
const routes: Routes = [
{
path: 'home',
component: TabsPage,
children: [
{
path: '',
redirectTo: '/home/(MyPlaces:MyPlaces)',
pathMatch: 'full'
},
{
path: 'MyPlaces',
outlet: 'MyPlaces',
component: MyPlacePage
},
{
path: 'Messages',
outlet: 'Messages',
component: MessagesPage
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabsPageRoutingModule { }
tabs.module.ts
import { IonicModule } from '@ionic/angular';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { TabsPageRoutingModule } from './tabs.router.module';
import { TabsPage } from './tabs.page';
import { MyPlacesPageModule } from '../MyPlaces/MyPlaces.module';
import { MessagesPageModule } from '../Messages/Messages.module';
@NgModule({
imports: [
IonicModule,
CommonModule,
FormsModule,
TabsPageRoutingModule,
MyPlacesPageModule,
MessagesPageModule
],
declarations: [TabsPage]
})
export class TabsPageModule {}
另请注意,您需要使用href链接标签页而不是routerLiknk。
以上是关于如何隐藏离子4选项卡只是为登录页面的主要内容,如果未能解决你的问题,请参考以下文章
如何在离子 3 中单击设备后退按钮时从选项卡 2 导航到选项卡 1