Question

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

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

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

即使您不知道这里出了什么问题，也祝新年快乐！：）

Answer 1

请在路由常量中执行以下更改：

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

如何从页面（登录）路由到选项卡页面

1 个答案: