采用Angular实现延迟加载

2 年 ago
韵, 科
3 minutes

补充记录

※這篇文章的寫法比起這個更適合：[Ionic]關於lazyLoad的路由寫法筆記[Angular]

这篇文章的简介

由于想要实施Angular的延迟加载并经过了一番尝试和调试，最终成功验证了其功能，所以在此做个备忘录。
顺带一提，根据这篇文章的参考建议，我将文件夹结构细分化得更加规范。
https://itnext.io/choosing-a-highly-scalable-folder-structure-in-angular-d987de65ec7

版本

"@angular/common": "~8.2.14"
"@angular/compiler": "~8.2.14"
"@angular/core": "~8.2.14"
"@angular/router": "~8.2.14"
"typescript": "~3.5.3"

以下是与路由相关的文件夹结构摘要

src
┣ app
┃ ┣ core
┃ ┃ ┗ auth
┃ ┃ 　┣ login
┃ ┃ 　┃ ┗ login.component.html/scss/spec.ts/ts
┃ ┃ 　┣ auth-routing.module.ts
┃ ┃ 　┣ auth.guard.ts
┃ ┃ 　┗ auth.module.ts
┃ ┣ modules
┃ ┃ ┣ homes
┃ ┃ ┃ ┣ pages
┃ ┃ ┃ ┃ ┗ homes
┃ ┃ ┃ ┃　 ┗ home.component.html/scss/spec.ts/ts
┃ ┃ ┃ ┣ homes-routing.module.ts
┃ ┃ ┃ ┗ homes.module.ts
┃ ┃ ┗ puroducts
┃ ┃ 　 ┣ pages
┃ ┃ 　 ┃ ┣ puroduct-new
┃ ┃ 　 ┃ ┃ ┗ puroduct-new.component.html/scss/spec.ts/ts
┃ ┃ 　 ┃ ┣ puroduct-edit
┃ ┃ 　 ┃ ┃ ┗ puroduct-edit.component.html/scss/spec.ts/ts
┃ ┃ 　 ┃ ┣ puroduct-view
┃ ┃ 　 ┃ ┃ ┗ puroduct-view.component.html/scss/spec.ts/ts
┃ ┃ 　 ┃ ┗ puroduct-list
┃ ┃ 　 ┃　 ┗ puroduct-list.component.html/scss/spec.ts/ts
┃ ┃ 　 ┣ homes-routing.module.ts
┃ ┃ 　 ┗ homes.module.ts
┃ ┣ app-routing.module.ts
┃ ┣ app.component.html/scss/spec.ts/ts
┃ ┗ app.module.ts
┗ index.html

如果是一个小规模的项目，我觉得没有必要把事情分得这么细
由于实际项目变得相当庞大，找文件变得很困难，所以考虑引入这种分类方式。

路由实现


<!-- 〜略〜 -->
  <body>
    <app-root></app-root>
  </body>
<!-- 〜略〜 -->

<!-- 〜略〜 -->
  <router-outlet></router-outlet>
<!-- 〜略〜 -->

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        AuthModule.forRoot() // Authは遅延にしない
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

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

const appRoutes: Routes = [
    {
        path: 'home',
        loadChildren: () => import('./modules/homes/homes.module').then(m => m.HomesModule),
        canActivate: [AuthGuard]
    },
    {
        path: 'products',
        loadChildren: () => import('./modules/products/products.module').then(m => m.ProductsModule),
        canActivate: [AuthGuard]
    },
    // ↓こいつを先頭に記述すると全て「/」になってしまったので注意
    {
        path: '**',
        redirectTo: '/',
    }
];

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes)
    ],
    exports: [RouterModule]
})
export class AppRoutingModule { }

遅延ロードの実装方法は、公式ドキュメントに記載されている通りに行います。
请按照官方文档上的指引来实现延迟加载功能。

从这里开始，单独模块

登录

import { CommonModule } from '@angular/common';
import { ModuleWithProviders, NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { AuthRoutingModule } from './auth-routing.module';
import { AuthGuard } from './auth.guard';
import { LoginComponent } from './login/login.component';

@NgModule({
    declarations: [
        LoginComponent
    ],
    imports: [
        CommonModule,
        ReactiveFormsModule,
        AuthRoutingModule
    ],
    exports: [LoginComponent]
})
export class AuthModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: AuthModule,
            providers: [
                AuthGuard
            ]
        };
    }
}

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';

const authRoutes: Routes = [
    {
        path: '',
        component: LoginComponent,
    }
];

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

家 (jiā)

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { HomesRoutingModule } from './homes-routing.module';
import { HomeComponent } from './pages/home/home.component';

@NgModule({
    declarations: [
        HomeComponent
    ],
    imports: [
        CommonModule,
        HomesRoutingModule
    ],
    providers: [],
    bootstrap: []
})
export class HomesModule { }

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './pages/home/home.component';

const homeRoutes: Routes = [
    {
        path: '',
        component: HomeComponent
    }
];

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

产品

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ProductEditComponent } from './pages/product-edit/product-edit.component';
import { ProductViewComponent } from './pages/product-view/product-view.component';
import { ProductNewComponent } from './pages/product-new/product-new.component';
import { ProductListComponent } from './pages/product-list/product-list.component';
import { ProductsRoutingModule } from './products-routing.module';

@NgModule({
    declarations: [
        ProductEditComponent,
        ProductViewComponent,
        ProductNewComponent,
        ProductListComponent
    ],
    imports: [
        CommonModule,
        ProductsRoutingModule
    ],
    providers: [],
    bootstrap: []
})
export class ProductsModule { }

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './pages/home/home.component';

const productRoutes: Routes = [
    {
        path: '',
        children: [
            {
                path: '', // またはpath: 'list'
                component: ProductListComponent
            },
            {
                path: 'new',
                component: ProductNewComponent
            },
            {
                path: 'edit/:id',
                component: ProductEditComponent
            },
            {
                path: 'view/:id',
                component: ProductViewComponent
            }
        ]
    }
];

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

孩子路由的实现方式
https://angular.jp/guide/router#child-route-configuration

✖
广告
将在 10 秒后关闭
bannerAds