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.

  • 相关阅读:
    oracle session和process的关系
    Oracle 连接、会话数的查看,修改
    Oracle 中session和processes的初始设置
    Oracle 修改字段注释
    Oracle创建自增字段和修改方法-ORACLE SEQUENCE的简单介绍
    Oracle 字段类型
    ORA-01591错误的原因和处理方法
    Oracle 优化器
    Oracle 使用TRUNCATE TABLE删除所有行
    Oracle中Hint深入理解(原创)
  • 原文地址:https://www.cnblogs.com/begin256/p/12210585.html
Copyright © 2011-2022 走看看