Как перейти со страницы (логин) на вкладку-страницу - PullRequest
Новая
       11

Как перейти со страницы (логин) на вкладку-страницу

0 голосов
/ 28 декабря 2018

Я хочу перейти со страницы без вкладок на страницу вкладок.

РЕДАКТИРОВАТЬ: Весь исходный код также можно найти здесь:
https://github.com/TannoFinn/demo1

Вот что я сделал:

Я установил новое приложение Ionic 4 со стартовыми «вкладками» ('ionic start tabs') и создал страницу входа ('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, и открыть «tabs / tab1», снова изменив URL.Только не через navigateRoot.

Я получаю ту же проблему, меняя '/tabs/tab1' в 

this.navCtrl.navigateRoot('/tabs/tab1');

на один из них:

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

Моя структура папок выглядит следующим образом:

app
- pages
- login
- tabs
- tab1
- tab2
- tab3

Скорее всего, я пока не вижу леса для деревьев.Любой совет / подсказка были бы великолепны!

Даже если вы не знаете, что здесь не так: счастливого нового года!:)

1 Ответ

0 голосов
/ 28 декабря 2018

Выполните следующие изменения в вашем Routing const: 

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'
  }
];

In login.page.ts 

goToTabs() {
   this.navCtrl.navigateRoot('/tabs/tab1/tab1NavName');//Example for tab1 only
}

Дайте мне знать, если возникнут проблемы.Также проверьте это .Это поможет вам.

...