Тип Ionic4 угловой всегда загружает
My Ionic4 App всегда загружает домашнюю страницу. Я пытался инициализировать его как loadChildren, component и rederictTo, но все равно всегда загружал домашнюю страницу.
.app-routing.module.ts
const routes: Routes = [
{ path: '', redirectTo: 'overview', pathMatch: 'full' },
{ path: 'overview', loadChildren: './overview/overview.module#OverviewPageModule' },
{ path: 'home', loadChildren: './home/home.module#HomePageModule' },
/...
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
.app.component.html
<ion-app>
<ion-router-outlet></ion-router-outlet>
</ion-app>
.home.module.ts
const routes: Routes = [
{
path: '',
component: HomePage
}
];
.overview.module.ts
const routes: Routes = [
{
path: '',
component: OverviewPage
}
];
.app.module.ts
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFirestoreModule,
IonicStorageModule.forRoot()
],
/...
1 ответ
Я думаю, что вы должны использовать OverviewModule вместо OverviewPageModule в вашем loadChild.
Для этого я просто вызвал функцию навигации в страже маршрутов.
Цель состояла в том, чтобы перейти на страницу входа в систему при запуске приложения и предотвратить переход на другие страницы до тех пор, пока не будет проведена аутентификация (и наоборот - отключить маршрут входа в систему, если вы уже вошли в систему).
В конечном итоге это выглядело примерно так (защитники маршрута в основном идентичны с противоположной логикой и парой дополнительных проверок в защитнике входа):
app-routing.module.ts
...
const routes: Routes = [
{
path: '',
canActivate: [TabsGuardService],
resolve: {
login: MidShiftLoginResolve
},
loadChildren: './tabs/tabs.module#TabsPageModule'
},
{
path: 'login',
canActivate: [LoginGuardService], // Routes back to '' if logged in already.
loadChildren: () => import('./login/login.module').then(m => m.LoginPageModule)
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes, {
preloadingStrategy: PreloadAllModules,
onSameUrlNavigation: 'reload'
})
],
exports: [RouterModule]
})
tabs.guard.service.ts
@Injectable({
providedIn: 'root'
})
export class TabsGuardService implements CanActivate {
constructor(private router: Router, private login: LoginService) { }
canActivate(route: ActivatedRouteSnapshot): Observable<boolean | UrlTree> |
Promise<boolean | UrlTree> | boolean | UrlTree {
const auth = this.login.isAuthenticated; // custom login service state
if (!auth) {
this.router.navigate(['/login']).then(null);
}
return auth;
}
}