我已经用 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 ,我真的很想保持它尽可能小和简单。
谢谢!
最佳答案
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)器。
希望这对您有所帮助。
关于javascript - Angular 2 延迟加载技术,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35361787/