Со страницы входа на страницу вкладок

Question

Я пытаюсь создать свое первое приложение с помощью Ionic Framework, и я застрял. Я хочу, чтобы перед моими вкладками была страница входа в систему, которая является моим основным экраном в приложении, и я получаю всегда одну и ту же ошибку URL. Ошибка: не удается сопоставить ни один маршрут. Сегмент URL: «tabs / tab1» Ошибка: невозможно сопоставить ни один маршрут. Сегмент URL: 'tabs / tab1'

app-routing.module.ts

import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [

  { 
    path: '', 
    loadChildren: './login/login.module#LoginPageModule' 
  },

  {
    path: 'tabs',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

tabs.router.module.ts

import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab1/tab1.module').then(m => m.Tab1PageModule)
          }
        ]
      },
      {
        path: 'tab2',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab2/tab2.module').then(m => m.Tab2PageModule)
          }
        ]
      },
      {
        path: 'tab3',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab3/tab3.module').then(m => m.Tab3PageModule)
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

login.page.ts

import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {

  constructor(public router: Router) { }

  ngOnInit() {
  }

  toTabs(){
    this.router.navigateByUrl('/tabs')
  }

}

login.page

HTML-файл просто содержит ионныйкнопка связана с событием onClick toTabs ().

Я попытался перейти к «/ tabs», «/ tabs / tab1» и «tabs», и я отчаялся. Если бы кто-нибудь мог мне помочь, я был бы очень благодарен.

Answer 1

Установить маршрут по умолчанию обратно в модуль вкладок. Если вы хотите отобразить панель вкладок в приложении, поместите маршрут под вкладкой в ​​tabs.router.module.ts. Если вы не хотите показывать панель вкладок, поместите маршрут в app-routing.module.ts.

app-routing.module.ts

const routes: Routes = [
  { path: '', loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule) },
  { path: 'login', loadChildren: () => import('./login/login.module').then(m => m.LoginPageModule) }
]

Вы должны сделать AuthService, где вы сохраняете данные пользователя. Вы размещаете здесь функцию входа в систему, если пользователь найден, задайте данные пользователя в переменной currentUser. Теперь вы можете получить доступ к пользователю в вашем приложении, если вы импортируете этот AuthService на другие страницы.

export class AuthService {
  currentUser: User;

  // place access functions here
}

И в точке входа вашего приложения: app.component.ts . Контроль, если пользователь установлен с пользовательскими данными. Если это так, перейдите на домашнюю страницу, если нет, перейдите на страницу входа.

initializeApp() {
  this.platform.ready().then(() => {     
    this.authService.currentUser ? this.router.navigateByUrl('') :   this.router.navigateByUrl('/login');
  });
}