javascript - Angular 2 延迟加载技术

Question

我已经用 Angular 1 和 requireJS 和 AMD 编写了一个大型应用程序，用于延迟加载和结构化。该应用程序不使用路由，但应用程序的某些部分(如 HTML、CSS 和 Javascript( Angular 模块))是延迟加载的。

现在我想切换到 Angular 2，我正在寻找不依赖于路由且不依赖于数千种不同 javascript 框架的 HTML、css 和 JS( Angular )内容的最佳延迟加载技术.

这么说懒加载路由组件好像挺简单的: http://blog.mgechev.com/2015/09/30/lazy-loading-components-routes-services-router-angular-2

但是如果没有路线，您将如何完成该场景？你会推荐像 webpack 这样的东西，还是我应该保留 requireJS？ angular 2有类似OClazyload的东西吗？还是即使没有任何框架，它也能以某种方式与 Angular 2 一起工作？

我是“保持简单”的 friend ，我真的很想保持它尽可能小和简单。

谢谢!

Answer 1

Angular 2 基于网络组件。最简单的方法(如您所说的“保持简单”)是使用路由和组件。您还可以简单地通过在 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>动态它将动态加载组件。这不是最佳做法。

有一个dynamic component loader对于 angular 2，但这并不像使用路由或指令那么简单。它将创建一个组件实例并将其附加到位于另一个组件实例的组件 View 内的 View 容器。

有了它你可以使用:

@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 链接)，您可以选择提供提供程序来配置为此组件实例提供的注入(inject)器。

希望这对您有所帮助。