如何从页面(登录)路由到选项卡页面

时间:2018-12-28 13:08:16

标签: angular routing tabs ionic4

我想从没有标签的页面导航到标签页面。

编辑:所有源代码也可以在此处找到:
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');

其中之一:

  • '/ tabs /'
  • '/ tabs /(tab1:tab1)'
  • './ tabs /'
  • './ tabs /(tab1:tab1)'
  • '../ tabs /'
  • '../ tabs /(tab1:tab1)'

我的文件夹结构如下:

app
-页数
-登录
-标签页
-tab1
-tab2
-tab3

到现在我很可能看不到森林。任何建议/提示都很棒!

即使您不知道这里出了什么问题,也祝新年快乐! :)

1 个答案:

答案 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。这将为您提供帮助。