Angular 2延迟加载技术

Question

我已经使用Angular 1编写了一个大型应用程序,并且需要使用AMD与MySQL进行延迟加载和结构化.应用程序不使用路由,但HTML,css和Javascript(角度模块)等应用程序的部分是延迟加载的.

现在我想改为Angular 2,我正在寻找HTML,css和JS(角度)内容的最佳延迟加载技术,它不依赖于路由,并且不依赖于数以千计的不同javascript框架.

所以延迟加载路由组件似乎很简单:http: //blog.mgechev.com/2015/09/30/lazy-loading-components-routes-services-router-angular-2

但是如果没有路线,你将如何实现这种情况？你会推荐像webpack这样的东西,还是应该保留requireJS？角度2有OClazyload吗？或者它甚至在没有任何框架的情况下以某种方式使用Angular 2？

我是"保持简单"的朋友,我真的希望尽可能小而简单.

谢谢!

Answer 1

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

希望这可以帮助。