Тип 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;
    }
}
Другие вопросы по тегам