如何解决在一个具有不同组件的模块内实现 Angular Lazy Loading
我正在尝试在我的测试应用程序中实现延迟加载。我有一个带有示例名称的 home/main/app 模块 - 电影。我创建了一个名为 Auth 的新模块,其中包含两个组件 - 注册和登录。我希望两个组件都被延迟加载。这是我在 app-routing.module.ts 中的示例代码
const routes: Route[] = [
{ path: 'movies',component: MoviesComponent,resolve: { homepageMovies: HomepageMoviesResolver } },{ path: 'movies/search',component: SearchedMoviesComponent },{ path: 'movies/:id',component: MovieDetailsComponent,resolve: { singleMovie: SingleMovieResolver } },{ path: 'register',loadChildren: () => import('./auth2/auth2.module').then(m=>m.Auth2Module) },{ path: 'login',loadChildren: () => import('./auth2/auth2.module').then(m=>m.Auth2Module)},{ path: '',pathMatch: 'full',redirectTo: 'movies' },{ path: '**',component: PageNotFoundComponent },];
我的 Auth 模块实现了延迟加载:
const routes: Routes = [
{ path: '',component: RegisterComponent },component: LoginComponent }
];
问题是当我导航到 http://localhost:4200/register 时一切正常,我看到了注册表。但是,当我转到 http://localhost:4200/login 时,我再次看到相同的注册表单,并且带有该表单的登录组件未正确显示。知道如何解决这个问题吗?
解决方法
这不是一个好方法。
就按照下面的做
将 app.module
更新为
const routes: Route[] = [
{ path: 'movies',component: MoviesComponent,resolve: { homepageMovies: HomepageMoviesResolver } },{ path: 'movies/search',component: SearchedMoviesComponent },{ path: 'movies/:id',component: MovieDetailsComponent,resolve: { singleMovie: SingleMovieResolver } },{ path: 'auth',loadChildren: () => import('./auth2/auth2.module').then(m=>m.Auth2Module) },{ path: '',pathMatch: 'full',redirectTo: 'movies' },{ path: '**',component: PageNotFoundComponent },];
和 auth2.module
为
const routes: Routes = [
{ path: 'register',component: RegisterComponent },{ path: 'login',component: LoginComponent }
];
现在以 registration
身份访问 http://localhost:4200/auth/register
页面
和 login
页为 http://localhost:4200/auth/login
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。