logo标签列表

Angular 2 懒加载技术

javascripthtmlcssangularjslazy-loading
15

我已经使用Angular 1和requireJS编写了一个大型应用程序，使用AMD进行懒加载和结构化。该应用程序不使用路由，但应用程序的部分（如HTML、CSS和Javascript（angular模块））是懒加载的。

现在我想改用Angular 2，并寻找最佳的HTML、CSS和JS（angular）内容的懒加载技术，它不依赖于路由，也不依赖于成千上万个不同的javascript框架。

因此，懒加载路由组件似乎相当简单： http://blog.mgechev.com/2015/09/30/lazy-loading-components-routes-services-router-angular-2

但如果没有路由，你会如何实现这种情况呢？ 你会推荐像webpack这样的东西，还是应该保留requireJS？是否有类似于Angular 2的OClazyload？或者即使没有任何框架，它也可以在Angular 2中工作吗？

我喜欢“保持简单”，我真的希望尽可能地小而简单。

谢谢！

3个回答
3
Angular 2基于Web组件。最简单的方法（正如您所说的“保持简单”）是使用路由和组件。您还可以通过在HTML中使用指令来简单地加载组件。例如：
@Component({
  selector: 'my-component', // directive name
  templateUrl: './app/my.component.html',
  directives: []
})
export class MyComponent {}



@Component({
  selector: 'root-component', // directive name
  directives: [MyComponent],
  template: '<my-component></my-component>',
})
export class myComponent {}

如果您修改模板以动态包含<my-component>，则可以动态加载组件。但这不是最佳实践。
Angular 2有一个动态组件加载器，但它不像使用路由或指令那样简单。它将创建一个组件实例，并将其附加到另一个组件实例的组件视图内的视图容器中。
使用它，您可以使用：
@Component({
  selector: 'child-component',
  template: 'Child'
})
class ChildComponent {
}
@Component({
  selector: 'my-app',
  template: 'Parent (<child id="child"></child>)'
})
class MyApp {
  constructor(dcl: DynamicComponentLoader, injector: Injector) {
    dcl.loadAsRoot(ChildComponent, '#child', injector);
  }
}
bootstrap(MyApp);

生成的DOM如下所示：
<my-app>
  Parent (
    <child id="child">Child</child>
  )
</my-app>

在此组件实例中，您可以选择提供提供程序以配置注入器的选项（请参见上面的angular2链接）。

希望这能帮到您。

2

使用 Angular 2 最新版本，我们可以使用 loadchildren 属性执行惰性加载。

例如：

{
    path: 'Customer',
    loadChildren: './customer.module#Customer2Module?chunkName=Customer'
},

在上面的示例中，我使用 webpack 打包（Angular 2 路由加载器） + Angular 2 路由来实现模块的惰性加载。

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接