Question

动态创建组件模板和Typescript代码。

我正在尝试动态生成组件，HTTP服务调用向我们发送了HTML模板和Typescript代码。在这种情况下，我们能够动态设置HTM1模板，但不能设置打字稿代码，无法弄清楚如何动态设置打字稿代码。

*请在下面找到基于HTTP调用呈现HTML模板的代码。 *

import { HttpClient, HttpClientModule } from "@angular/common/http";
import { Component, ViewChild, ViewContainerRef, Compiler, Injector, NgModule, NgModuleRef, ComponentFactoryResolver, OnInit } from "@angular/core";

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  @ViewChild('vc', { read: ViewContainerRef }) _container: ViewContainerRef;

  constructor(private http: HttpClient, private _compiler: Compiler, private componentFactoryResolver: ComponentFactoryResolver,
    private _injector: Injector,
    private _m: NgModuleRef<any>) {

  }
  ngOnInit() {
    return this.http.get("https://raw.githubusercontent.com/ketan-gote/stackblitz-demo/master/template.txt", { responseType: 'text' }).subscribe((txt: any) => {
      console.log(txt);
      const tmpCmp = Component({ template: txt, selector: 'abcd' })(class {

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

      this._compiler.compileModuleAsync(tmpModule)
        .then((moduleFactory) => {
          debugger;
          const resolver = moduleFactory.create(this._injector).componentFactoryResolver;
          const f = resolver.resolveComponentFactory(tmpCmp);
          const cmpRef = f.create(this._injector, [], null, this._m);
          this._container.insert(cmpRef.hostView);
        })
    });

  }
}

这里是a working link ！

*问题 现在，当我们尝试获取TS代码作为响应的一部分时，它也会给出错误 core.js：12501错误TypeError：无法读取未定义*的属性'__annotations __'

请在下面找到呈现TS的代码

import { HttpClient, HttpClientModule } from "@angular/common/http"; import { Component, ViewChild, ViewContainerRef, Compiler, Injector, NgModule, NgModuleRef, ComponentFactoryResolver, OnInit } from "@angular/core"; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { @ViewChild('vc', { read: ViewContainerRef }) _container: ViewContainerRef; constructor(private http: HttpClient, private _compiler: Compiler, private componentFactoryResolver: ComponentFactoryResolver, private _injector: Injector, private _m: NgModuleRef<any>) { } ngOnInit() { return this.http.get("https://raw.githubusercontent.com/ketan-gote/stackblitz-demo/master/ts.txt", { responseType: 'text' }).subscribe((txt: any) => { console.log(txt); const tmpCmp = Component({ template: "<h1>HEAD</h1>", selector: 'abcd' })(txt); const tmpModule = NgModule({ imports: [HttpClientModule], declarations: [tmpCmp], entryComponents: [tmpCmp] })(class { }); this._compiler.compileModuleAsync(tmpModule) .then((moduleFactory) => { debugger; const resolver = moduleFactory.create(this._injector).componentFactoryResolver; const f = resolver.resolveComponentFactory(tmpCmp); const cmpRef = f.create(this._injector, [], null, this._m); this._container.insert(cmpRef.hostView); }) }); } }

这里是is not working code link！

Answer 1

我知道已经晚了，但是可以使用“ eval”功能来完成。

从此更改行

const tmpCmp = Component({ template: "<h1>HEAD</h1>", selector: 'abcd' })(txt);

对此

const tmpCmp = Component({ template: "<h1>HEAD</h1>", selector: 'abcd' })(eval('(' +txt+ ')'));

我在这篇文章（https://stackoverflow.com/a/14377840）中找到了答案。

基于HTTP调用的Angular动态组件

1 个答案: