angular - 基于 HTTP 调用的 Angular 动态组件

Question

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

我正在尝试动态生成组件，HTTP 服务调用向我们发送 HTML 模板和 Typescript 代码。在这里，我们能够动态设置 HTMl 模板，但不能动态设置 typescript 代码，无法弄清楚如何动态设置 typescript 代码。

* 请在下面找到基于 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);
        })
    });

  }
}

这是一个工作链接！

* 问题 现在，当我们尝试获取 TS 代码作为响应的一部分时，它会给出错误core.js:12501 错误类型错误：无法读取未定义的属性“__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);
        })
    });

  }
}

这 是无效的代码链接！

标签： angular

Answer 1

我知道已经很晚了，但这可以通过“评估”功能来完成。

从此改行

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 )中找到了答案。