Ionic framework 在Ionic4中从登录页面导航到选项卡?
我正在创建一个应用程序,我想从登录页面移动到选项卡页面。当我尝试导航到标签页时,它只显示没有标签的主页 这是我的密码 应用程序路由.module.tsIonic framework 在Ionic4中从登录页面导航到选项卡?,ionic-framework,angular6,ionic4,router-outlet,Ionic Framework,Angular6,Ionic4,Router Outlet,我正在创建一个应用程序,我想从登录页面移动到选项卡页面。当我尝试导航到标签页时,它只显示没有标签的主页 这是我的密码 应用程序路由.module.ts import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = [ { path: '', redirectTo: 'login', pathMatch:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{ path: 'login', loadChildren: './pages/login/login.module#LoginPageModule' },
{ path: 'tabs', loadChildren: './pages/tabs/tabs.module#TabsPageModule' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
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 { TabsPageRoutingModule } from './tabs.router.module';
import { TabsPage } from './tabs.page';
import { HomePageModule } from '../home/home.module';
import { ActivityPageModule } from '../activity/activity.module';
import { MygroupsPageModule } from '../mygroups/mygroups.module';
import { MessagesPageModule } from '../messages/messages.module';
import { SettingsPageModule } from '../settings/settings.module';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
TabsPageRoutingModule,
HomePageModule,
ActivityPageModule,
MygroupsPageModule,
MessagesPageModule,
SettingsPageModule
],
declarations: [TabsPage]
})
export class TabsPageModule {}
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
import { HomePage } from '../home/home.page';
import { ActivityPage } from '../activity/activity.page';
import { MygroupsPage } from '../mygroups/mygroups.page';
import { MessagesPage } from '../messages/messages.page';
import { SettingsPage } from '../settings/settings.page';
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: '',
redirectTo: '/tabs/(home:home)',
pathMatch: 'full',
},
{
path: 'home',
outlet: 'home',
component: HomePage
},
{
path: 'activity',
outlet: 'activity',
component: ActivityPage
},
{
path: 'mygroups',
outlet: 'mygroups',
component: MygroupsPage
},
{
path: 'messages',
outlet: 'messages',
component: MessagesPage
},
{
path: 'settings',
outlet: 'settings',
component: SettingsPage
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}
制表符模块ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{ path: 'login', loadChildren: './pages/login/login.module#LoginPageModule' },
{ path: 'tabs', loadChildren: './pages/tabs/tabs.module#TabsPageModule' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
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 { TabsPageRoutingModule } from './tabs.router.module';
import { TabsPage } from './tabs.page';
import { HomePageModule } from '../home/home.module';
import { ActivityPageModule } from '../activity/activity.module';
import { MygroupsPageModule } from '../mygroups/mygroups.module';
import { MessagesPageModule } from '../messages/messages.module';
import { SettingsPageModule } from '../settings/settings.module';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
TabsPageRoutingModule,
HomePageModule,
ActivityPageModule,
MygroupsPageModule,
MessagesPageModule,
SettingsPageModule
],
declarations: [TabsPage]
})
export class TabsPageModule {}
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
import { HomePage } from '../home/home.page';
import { ActivityPage } from '../activity/activity.page';
import { MygroupsPage } from '../mygroups/mygroups.page';
import { MessagesPage } from '../messages/messages.page';
import { SettingsPage } from '../settings/settings.page';
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: '',
redirectTo: '/tabs/(home:home)',
pathMatch: 'full',
},
{
path: 'home',
outlet: 'home',
component: HomePage
},
{
path: 'activity',
outlet: 'activity',
component: ActivityPage
},
{
path: 'mygroups',
outlet: 'mygroups',
component: MygroupsPage
},
{
path: 'messages',
outlet: 'messages',
component: MessagesPage
},
{
path: 'settings',
outlet: 'settings',
component: SettingsPage
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}
选项卡.路由器.模块.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{ path: 'login', loadChildren: './pages/login/login.module#LoginPageModule' },
{ path: 'tabs', loadChildren: './pages/tabs/tabs.module#TabsPageModule' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
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 { TabsPageRoutingModule } from './tabs.router.module';
import { TabsPage } from './tabs.page';
import { HomePageModule } from '../home/home.module';
import { ActivityPageModule } from '../activity/activity.module';
import { MygroupsPageModule } from '../mygroups/mygroups.module';
import { MessagesPageModule } from '../messages/messages.module';
import { SettingsPageModule } from '../settings/settings.module';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
TabsPageRoutingModule,
HomePageModule,
ActivityPageModule,
MygroupsPageModule,
MessagesPageModule,
SettingsPageModule
],
declarations: [TabsPage]
})
export class TabsPageModule {}
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
import { HomePage } from '../home/home.page';
import { ActivityPage } from '../activity/activity.page';
import { MygroupsPage } from '../mygroups/mygroups.page';
import { MessagesPage } from '../messages/messages.page';
import { SettingsPage } from '../settings/settings.page';
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: '',
redirectTo: '/tabs/(home:home)',
pathMatch: 'full',
},
{
path: 'home',
outlet: 'home',
component: HomePage
},
{
path: 'activity',
outlet: 'activity',
component: ActivityPage
},
{
path: 'mygroups',
outlet: 'mygroups',
component: MygroupsPage
},
{
path: 'messages',
outlet: 'messages',
component: MessagesPage
},
{
path: 'settings',
outlet: 'settings',
component: SettingsPage
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}
从登录页面,我以这种方式导航
this.router.navigate(['tabs']);
但这只是显示一个没有选项卡的主页。你能指导我该怎么做吗,即使在DOM中没有显示选项卡,我也试着检查它们。
它只是将主页显示为默认页面。我也有同样的问题,导航在选项卡页面中不起作用。为了避免这个问题,我这样做了:
this.navCtrl.navigateRoot('/home'); // I use NavCtroller instead of Router
和app-routing.module.ts中的:
{ path: 'home', redirectTo: '/tabs/(home:home)' },
我希望它能在下一个测试版中正常工作。这是ionic项目吗?@AmiLinn是的,在ionic 4的项目中我不确定,我认为这不是做ionic项目的正确方法。@AmiLinn在ionic 4中,Tabs实现是这样的。我遵循的是Ionic Template,但navCtrl将在ionic4中贬值,对吗?