模块 - 延迟加载模块

优质

小牛编辑

139浏览

2023-12-01

为了显示这种关系，让我们开始定义一个简单的模块，作为我们的示例应用程序的根模块。

app/app.module.ts

到目前为止，这是一个非常常见的模块，依赖于，有一个路由机制和两个组件：AppComponent和EagerComponent。现在，让我们专注于定义导航的应用程序（AppComponent）的根组件。

app/app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
    <h1>My App</h1>
    <nav>
      <a routerLink="eager">Eager</a>
      <a routerLink="lazy">Lazy</a>
    </nav>
    <router-outlet></router-outlet>
  `
export class AppComponent {}

我们的导航系统只有两条路： eager 和。要知道当点击它们时加载哪些路径，我们需要看看我们传递给根模块的路由对象。

app/app.routing.ts

app/eager.component.ts

import { Component } from '@angular/core';
@Component({
  template: '<p>Eager Component</p>'
})
export class EagerComponent {}

但更重要的是，我们可以看到，每当我们试图去lazy的路径，我们会懒加载一个模块，方便地称为LazyModule 。仔细观察那条路由的定义：

这里有几个重要的事情要注意：

我们使用属性loadChildren而不是component 。
我们传递一个字符串而不是一个符号，以避免加载模块。
我们不仅定义了模块的路径，还定义了类的名称。

除了它有自己的路由和一个名为LazyComponent的组件，LazyModule没有什么特别的。

app/lazy/lazy.module.ts

import { NgModule } from '@angular/core';
import { routing } from './lazy.routing';
@NgModule({
  declarations: [LazyComponent]
})
export class LazyModule {}

app/lazy/lazy.routing.ts

注意，我们使用方法调用forChild而不是forRoot来创建路由对象。我们应该在为特征模块创建路由对象时始终这样做，无论模块应该是eagerly 还是 lazily加载。

最后，我们的LazyComponent非常类似于EagerComponent，并且只是一些文本的占位符。

app/lazy/lazy.component.ts

import { Component } from '@angular/core';
@Component({
  template: '<p>Lazy Component</p>'
})

当我们第一次加载应用程序时，AppComponent中的将在浏览器中加载，我们应该看到导航系统和文本“Eager Component”。直到这一点，LazyModule没有被下载，只有当我们点击链接“Lazy”所需的代码将被下载，我们将在浏览器中看到消息“Lazy Component”。