gpt4 book ai didi

Angular 6 : Convert eager loading to lazy loading

转载 作者:行者123 更新时间:2023-12-04 01:11:21 30 4
gpt4 key购买 nike

我有一个完整的 angular 应用程序,它使用预先加载。
我想将其转换为延迟加载,但是因为我对所有路线都有保护,而且所有路线都是到一条 protected 主路线的子路线,我不知道是否可以做到这一点,并且仍然可以使其正常运行喜欢急切加载。

这是我在 app-routing.module 中的路由数组:

// Routing array - set routes to each html page
const appRoutes: Routes = [
{ path: 'login/:id', canActivate: [AuthGuard], children: [] },
{ path: '', canActivateChild: [AuthGuard], children: [
{ path: '', redirectTo: '/courses', pathMatch: 'full' },
{ path: 'courses', component: CourseListComponent, pathMatch: 'full'},
{ path: 'courses/:courseId', component: CourseDetailComponent, pathMatch: 'full' },
{ path: 'courses/:courseId/unit/:unitId', component: CoursePlayComponent,
children: [
{ path: '', component: CourseListComponent },
{ path: 'lesson/:lessonId', component: CourseLessonComponent, data:{ type: 'lesson'} },
{ path: 'quiz/:quizId', component: CourseQuizComponent, data: {type: 'quiz'} }
]}
]},
{ path: 'welcome', component: LandingPageComponent, pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent, pathMatch: 'full' }];


我想知道的是是否可以通过延迟加载来实现这一点,如果可以,我想知道主要思想或我需要知道什么才能做到这一点。

在我做的所有教程中,我从未遇到过这种事情。
非常感谢你

最佳答案

谢谢大家的回答。我成功地将我的路由转换为延迟加载。这是代码:

app-routing.module

import { NgModule } from '@angular/core';
import { Routes, RouterModule, Router } from '@angular/router';
import { AuthGuard } from './auth.guard';

import { AppComponent } from './app.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { LandingPageComponent } from './landing-page/landing-page.component';
import { HeaderComponent } from './header/header.component';
import { CourseModule } from './courses/course.module';


const routes:Routes = [
{ path: 'welcome', component: LandingPageComponent, pathMatch: 'full' },
{ path: 'login/:id', canActivate: [AuthGuard], children: [] },
{ path: '', canActivateChild: [AuthGuard], children: [
{ path: '', redirectTo: 'courses', pathMatch: 'full' },
{ path: 'courses', loadChildren: () => CourseModule }
]},
{ path: '**', component: PageNotFoundComponent, pathMatch: 'full' }
]

@NgModule({
imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload', initialNavigation: 'enabled',
paramsInheritanceStrategy: 'always' })],
providers: [AuthGuard],
exports: [RouterModule]
})


export class AppRoutingModule { }


course-routing.module

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from "@angular/router";
import { AuthGuard } from '../auth.guard';

import { CourseListComponent } from './course-list/course-list.component';
import { CourseDetailComponent } from './course-detail/course-detail.component';
import { CoursePlayComponent } from './course-play/course-play.component';
import { CourseQuizComponent } from './course-play/course-quiz/course-quiz.component';
import { CourseLessonComponent } from './course-play/course-lesson/course-lesson.component';


const routes:Routes = [
{ path: '', component: CourseListComponent, canActivate: [AuthGuard] },
{ path: ':courseId', component: CourseDetailComponent, canActivate: [AuthGuard] },
{ path: ':courseId/unit/:unitId', component: CoursePlayComponent, canActivate: [AuthGuard], canActivateChild: [AuthGuard], children: [
{ path: 'lesson/:lessonId', component: CourseLessonComponent, data:{ type: 'lesson'} },
{ path: 'quiz/:quizId', component: CourseQuizComponent, data: {type: 'quiz'}}
]}
]

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


auth.guard

import { Injectable } from '@angular/core';
import { Observable, throwError } from 'rxjs';
import { Router, CanActivate, CanActivateChild, CanLoad, ActivatedRouteSnapshot, RouterStateSnapshot, NavigationExtras, Route } from '@angular/router';
import { AuthUserService } from './users/auth-user.service';
import { LocalStorage } from '@ngx-pwa/local-storage';

@Injectable()
export class AuthGuard implements CanActivate , CanActivateChild {

constructor(private authUserService: AuthUserService, private router: Router) { }

canActivate(route: ActivatedRouteSnapshot, state:
RouterStateSnapshot): boolean |
Observable<boolean> | Promise<boolean> {
let id, course_id;

// save the id from route snapshot
if (route.params) {
id = +route.params.id;
course_id = +route.params.courseId;
}

// if you try to logging with id
if (id) {
this.router.navigate(["/courses"]);
return this.authUserService.login(id);
}

// if you're already logged in and navigate between pages
if (this.authUserService.isLoggedIn()){
if (course_id){
// check if someone try to access a locked course
if (this.authUserService.isCourseNotPartOfTheSubscription(course_id)){
this.router.navigate(["/welcome"]);
return false;
}
else
return true;
}
else
return true;
}

// if you are not logged and didn't try to log - redirect to landing page
else {
this.router.navigate(["/welcome"]);
return false;
}
}

canActivateChild(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): boolean |
Observable<boolean> | Promise<boolean> {
return this.canActivate(route, state);
}

canLoad(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): boolean |
Observable<boolean> | Promise<boolean> {
return this.canActivate(route, state);
}
}

关于 Angular 6 : Convert eager loading to lazy loading,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55396282/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com