如何在运行时从文件中加载 HTML 模板？

Question

我正在尝试将 HTML 模板动态加载到 Angular 8 应用程序中的组件。不幸的是，我的解决方案似乎不适用于 build --prod Sop 我该怎么办？

在我的项目中，我尝试创建一个动态组件，该组件在应用程序运行时加载其 HTML 模板。所以我搜索了很多，并在下面找到了这个解决方案（有点简化）。它在开发环境中运行良好，但不适用于生产环境。

import {
    Compiler, Component, Injector, VERSION, Input, ViewChild, NgModule, NgModuleRef,
ViewContainerRef, AfterViewInit, OnInit, ComponentFactoryResolver
} from '@angular/core';
import { BrowserModule }    from '@angular/platform-browser';


@Component({
    selector: 'dyn-component',
    template: `<ng-container #dynamicTemplate></ng-container>`
})
export class DynComponent implements AfterViewInit, OnInit {
    @ViewChild('dynamicTemplate', {static: true, read: ViewContainerRef}) dynamicTemplate;
    @Input() data:any;

constructor(
    private _compiler: Compiler,
    private _injector: Injector,
    private _m: NgModuleRef<any>,
    private componentFactoryResolver: ComponentFactoryResolver,
    public viewContainerRef: ViewContainerRef
) 
{}


ngOnInit() {
}

ngAfterViewInit() {
    let myTemplateUrl = '/assets/scoreboard/BER/template.html';

    const tmpCmp = Component({
        moduleId: module.id, templateUrl: myTemplateUrl
    })
    (
        class {}
    );


    const tmpModule = NgModule({
        imports: [BrowserModule],
        declarations: [tmpCmp]})(class {
    });

    this._compiler.compileModuleAndAllComponentsAsync(tmpModule)
                  .then((factories) => {
                        const f = factories.componentFactories[0];
                        const cmpRef = f.create(this._injector, [], null, this._m);
                        cmpRef.instance.name = 'dynamic';
                        cmpRef.instance.data = this.data;

                        this.dynamicTemplate.insert(cmpRef.hostView);
                  });
}

那么，如何创建一个动态组件，其中模板 URL 作为参数给出，然后在运行时创建该组件？或者：如何替换组件中已经加载的模板？

请问，谁能帮我解决这个问题？

Answer 1

只是为了给你一个不强迫你在这里创建 25 个组件的答案，这是一种简单的处理方法。由于您已准备好动态注入模板，因此我假设您的组件 JavaScript 在组件之间不会有太大差异，否则无论哪种方式都达不到目的。

import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello',
  template: `
<div *ngIf='template == "template1"'>
  <div class="companyLogo">
    <img [src]="logoSourceUrl">
    <label>First Template</label>
  </div>
</div>

<div *ngIf='template == "template2"'>
  <div class="companyLogo">
    <img [src]="logoSourceUrl">
    <label>Second Template</label>
  </div>
</div>
  `,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input() template: string;
}

用法：

<hello template="template1"></hello>
<hello template="template2"></hello>

Demo 这个。