我想从没有标签的页面导航到标签页面。
编辑:所有源代码也可以在此处找到:
https://github.com/TannoFinn/demo1
这是我所做的:
我用启动程序“选项卡”('ionic start tabs'
)设置了一个新的Ionic 4应用程序,并创建了一个登录页面('ionic g page login'
)。然后,我将初始页面从选项卡更改为登录。
我的代码:
app-routing.module
const routes: Routes = [
//{path: '', loadChildren: './tabs/tabs.module#TabsPageModule'},
{path: '', loadChildren: './pages/login/login.module#LoginPageModule'},
{path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule'},
{path: 'login', loadChildren: './pages/login/login.module#LoginPageModule'}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
login.page.html
<ion-header>
<ion-toolbar>
<ion-title>Login</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<a (click)="goToTabs()">Go to Tabs</a>
</ion-content>
login.page.ts
import {Component, OnInit} from '@angular/core';
import {NavController} from "@ionic/angular";
@Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage {
constructor(
public navCtrl: NavController
) {}
goToTabs() {
this.navCtrl.navigateRoot('/tabs/tab1');
}
}
tabs.router.module.ts(未更改)
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'tab1',
children: [
{
path: '',
loadChildren: '../tab1/tab1.module#Tab1PageModule'
}
]
},
{
path: 'tab2',
children: [
{
path: '',
loadChildren: '../tab2/tab2.module#Tab2PageModule'
}
]
},
{
path: 'tab3',
children: [
{
path: '',
loadChildren: '../tab3/tab3.module#Tab3PageModule'
}
]
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}
错误(当我单击锚点时):
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: '/tabs/tab1'
Error: Cannot match any routes. URL Segment: '/tabs/tab1'
at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:2469)
at CatchSubscriber.selector (router.js:2450)
at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:34)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:16147)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)
at invokeTask (zone.js:1540)
当我这样离开初始路线时
{path: '', loadChildren: './tabs/tabs.module#TabsPageModule'},
一切都很好。我什至可以通过更改URL导航到“登录”,并通过再次更改URL打开“ tabs / tab1”。只是不通过navigationRoot。
在
中更改'/tabs/tab1'
时遇到相同的问题
this.navCtrl.navigateRoot('/tabs/tab1');
其中之一:
我的文件夹结构如下:
app
-页数
-登录
-标签页
-tab1
-tab2
-tab3
到现在我很可能看不到森林。任何建议/提示都很棒!
即使您不知道这里出了什么问题,也祝新年快乐! :)
答案 0 :(得分:0)
请在路由常量中执行以下更改:
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'tab1',
children: [
{ path: 'tab1NavName', component: Tab1Component }
]
},
{
path: 'tab2',
children: [
{ path: 'tab2NavName', component: Tab2Component }
]
},
{
path: 'tab3',
children: [
{ path: 'tab3NavName', component: Tab3Component }
]
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
];
在login.page.ts
goToTabs() {
this.navCtrl.navigateRoot('/tabs/tab1/tab1NavName');//Example for tab1 only
}
让我知道是否有任何问题。还要检查this。这将为您提供帮助。