Question

我有一个要求，我使用angular5创建一个动态组件。我有一个生成组件的writea指令。它在dev / prod模式下都运行良好。但是在将应用程序升级到angular6时，它不像prod模式那样工作，当AOT是＆＃34; ON＆＃34;时，编译器类不可用。我怎样才能重新设计我的溶液，因为它在angular6中工作？

export class HtmlOutletDirective implements OnChanges {
@Input() html: string;
constructor(private vcRef: ViewContainerRef, private compiler: Compiler, 
private translate: TranslateService) {
}

ngOnChanges() {
const html = this.html;
if (!html) { return; }

@Component({
  selector: 'ccw-dynamic-component',
  template: `
    <div [innerHtml]="innerHtmlTemplate">
    </div>
    `
})

class DynamicHtmlComponent {
  private innerHtmlTemplate: any = '';
  constructor(private httpClient: HttpClient, private sanitizer: DomSanitizer) {
    this.httpClient.get(html, { responseType: 'text' }).subscribe((htmlContent) => {
      this.innerHtmlTemplate = sanitizer.bypassSecurityTrustHtml(htmlContent.toString());
    });
  }
}

@NgModule({
  imports: [CommonModule],
  declarations: [DynamicHtmlComponent]
})

class DynamicHtmlModule { }

this.compiler.compileModuleAndAllComponentsAsync(DynamicHtmlModule)
  .then(factory => {
    const compFactory = factory.componentFactories.find(x => x.componentType === DynamicHtmlComponent);
    const compRef = this.vcRef.createComponent(compFactory, 0);
  });
 }

我在我的组件中调用了这样的指令：

   <mat-accordion [multi]="true">
        <mat-expansion-panel *ngFor='let releaseNote of releaseNotes'>
            <mat-panel-description>
                <dcHtmlOutlet [html]="releaseNote.html"></dcHtmlOutlet>
            </mat-panel-description>
        </mat-expansion-panel>
    </mat-accordion>

以下是我得到的错误：

 Runtime compiler is not loaded Error stack trace: Error: Runtime compiler is not loaded at Le (main.00612d315fe86075b5fb.js:1) at t.compileModuleAndAllComponentsAsync

如何在prod模式打开时如何在角度6中创建动态组件

0 个答案: