我们在 cms (Sitecore( 中托管了一个 angular2 应用程序，我们要求内容编辑者可以在页面中添加、删除和重新排序应用程序的组件，他们还可以根据需要添加其他组件。
我们通过让 cms 生成脚本标签来加载我们的组件来做到这一点。生成的 html 的一个示例是：
<body>
<sales-root></sales-root>
<script type="text/html" id="generated-header">
<sales-welcome></sales-welcome>
</script>
<script type="text/html" id="generated-content">
<sales-personal-info></sales-personal-info>
<div><!-- regular html content --></div>
</script>
</body>
在sales-root组件中，我们有
export class AppComponent extends Translation implements OnInit {
@ViewChild('header', { read: ViewContainerRef }) headerRef;
@ViewChild('content', { read: ViewContainerRef }) contentRef;
ngOnInit() {
this.loadSitecorePlaceholders(this.headerRef, 'generated-header');
this.loadSitecorePlaceholders(this.contentRef, 'generated-content');
// ...
}
private loadSitecorePlaceholders(containerRef: ViewContainerRef, placeholder: string) {
// get the generated components listed from the sitecore placeholder
const generatedContent = this.elementRef.nativeElement.parentNode.children[placeholder];
if (generatedContent === undefined) { return; }
if (containerRef === undefined) { return; }
this.createComponentService.createComponentsFromHtml(containerRef, generatedContent.innerText);
// we've finished creating all the components we need, remove the nodes created by sitecore.
this.elementRef.nativeElement.parentNode.removeChild(generatedContent);
}
}
在CreateComponentService中，我们已经初始化了一个允许的组件工厂数组和一个通用的htmlHost组件工厂：
this._selectableFactories = creatableComponents
.map((component: Type<any>) =>
this.componentFactoryResolver.resolveComponentFactory(component));
我们为选择器解析 CMS 生成的脚本标记，如果找到它们，我们添加组件，或者注入到通用 html 组件中：
private createAngularComponent(
container: ViewContainerRef,
factory: ComponentFactory<Type<any>>,
element: HTMLElement,
) {
const selector = factory.selector.toLocaleLowerCase();
container.createComponent(factory);
// ...
}
private createHtmlComponent(container: ViewContainerRef, element: HTMLElement) {
const component = container.createComponent(this.htmlHostFactory).instance;
component.content = element.outerHTML;
}
除了性能之外，所有这些都运行良好。我们有许多组件，加载和编译它们都需要一段时间(在快速机器上需要 3 到 4 秒(。我们通过两种方式解决这个问题：
- 迁移到 AOT 而不是 JIT。由于内部库，证明存在问题，但我们正在解决它。
- 根据需要延迟加载组件。我们只需要在任何页面上使用组件的子集，因此这应该会给我们带来一些收益。
使用 #2，我们需要在@NgModule中以entryComponents列出所有可创建的组件，因此它们必须在生成时都存在......右？我也在预加载工厂，以便我可以找到选择器，但我可以在开发中构建该列表。
理想情况下，我会有一个懒惰组件工厂的选择器字典，第一次调用会下载组件并加载它然后注入它，这将在 ngInit 之后发生，并且还会给出更快的加载外观。
是否可以延迟加载组件？到目前为止，我看到的所有示例都在使用路由器，我们不是由于动态组合。 如何？
你有几个选择
1( 将延迟加载的组件添加到它们自己的模块中，并按需加载和编译这些组件，如 以下是您需要了解的有关 Angular 中动态组件的信息。您将需要使用compileModuleAndAllComponentsAsync方法。下面是示例：
ngAfterViewInit() {
System.import('app/t.module').then((module) => {
_compiler.compileModuleAndAllComponentsAsync(module.TModule)
.then((compiled) => {
const m = compiled.ngModuleFactory.create(this._injector);
const factory = compiled.componentFactories[0];
const cmp = factory.create(this._injector, [], null, m);
})
})
}
2( 另一种方法是 AOT 编译组件并按需加载其工厂。Angular AOT 编译器将 AOT 输出生成为有效的 ES6/TS 模块，因此您可以单独导入组件并直接从工厂创建它们的实例：
System.import('components/ex.component.ngfactory').then((factory) => {
const cmp = factory.create(this._injector, [], null, m);
})
或者，您可以获取包含所有组件的模块工厂，并在它的实例中创建。