zoukankan      html  css  js  c++  java
  • angular惰性加载实现2020

    1.命令:ng generate module customers --routing
    这会创建一个 customers 目录,其中有两个文件:CustomersModule 和 CustomersRoutingModule。 CustomersModule 扮演的是与客户紧密相关的所有事物的管理员。CustomersRoutingModule 则会处理任何与客户有关的路由。
    CLI 会把 CustomersRoutingModule 自动导入到 CustomersModule。它会在文件的顶部添加一条 JavaScript 的 import 语句,并把 CustomersRoutingModule 添加到 @NgModule 的 imports 数组中。

     2.命令:ng generate component customers/customer-list

    这会在 customers 目录中创建一个名叫 customer-list 的文件夹,其中包含该组件的四个文件。
    就像路由模块一样,CLI 也自动把 CustomerListComponent 导入了 CustomersModule。

    3. src/app/app-routing.module.ts

    const routes: Routes = [
    {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(mod => mod.CustomersModule)
    },
    {
    path: 'orders',
    loadChildren: () => import('./orders/orders.module').then(mod => mod.OrdersModule)
    },
    {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
    }
    ];
    注意看惰性加载的语法:loadChildren 后面紧跟着一个函数,它使用浏览器内置的 import('...') 语法来实现动态导入。这里的导入路径是到那个模块的相对路径。
    4.初始化效果:

    地址栏:localhost:4200

     5.点击customers按钮效果如下图,地址栏:localhost:4200/customers,查看浏览器Network,可看到customer-module模块被惰性加载了。

     6.orders模块惰性加载同5.

  • 相关阅读:
    探究 encode 和 decode 的使用问题(Python)
    C语言结构体在内存中的存储情况探究------内存对齐
    文件基本操作 (C语言)
    利用Xamaria构建Android应用-公交发车信息屏
    ChakraCore ,Net托管编程
    Go并发与.Net TAP
    码农视角
    让isis支持高德地图
    Fedora Server 上配置 MariaDb 集群
    .Net Sokcet 异步编程
  • 原文地址:https://www.cnblogs.com/begin256/p/12210585.html
Copyright © 2011-2022 走看看