Question

我们在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，我们需要在entryComponents中的@NgModule中列出所有可创建的组件，因此它们必须全部存在，因为它生成了......对吗？我也预装了工厂，所以我可以找到选择器，但我可以在开发中构建该列表。

理想情况下，我有一个懒惰组件工厂工厂的选择器字典，第一次调用会下载组件然后加载它然后注入它，这会在ngInit之后发生，并且还会给出更快加载的外观。 / p>

是否可以延迟加载组件？到目前为止，我所见过的所有示例都使用的是路由器，而且由于动态组合，我们不会这样做。怎么样？

Answer 1

您有几个选择

1）将延迟加载的组件添加到他们自己的模块中，并按照Here is what you need to know about dynamic components in 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);
  })

或者您可以使用所有组件获取模块工厂并在其中创建。

以angular-2动态创建延迟加载的组件

1 个答案: