使用构造函数参数在Angular 9中生成动态组件

Question

下面是组件生成代码。问题是我找不到如何将值传递给构造函数的解决方案。

原始代码： https://stackblitz.com/edit/angular-ivy-tcejuo

private addComponent(template: string) {
    class TemplateComponent {

      @ViewChild('target', {static: false, read: ViewContainerRef}) public target;

      constructor() {
      }

      public myMethod() {
        // do something     
      }
    }

    class TemplateModule {
      @ViewChild('target', {static: false, read: ViewContainerRef}) public target;
    }

    const componentType = Component({template: template + '<div #target></div>'})(TemplateComponent)

    const componentModuleType = NgModule({declarations: [componentType]})(TemplateModule)

    const mod = this.compiler.compileModuleAndAllComponentsSync(componentModuleType);
    const factory = mod.componentFactories.find((comp) =>
        comp.componentType === componentType
    );
    this.container.createComponent(factory);
  }

如果您在Template Component类中编辑构造函数参数（例如，私有渲染：Renderer2），它将开始生成错误：

此构造函数与Angular Dependency Injection不兼容 因为它对参数列表索引0的依赖关系无效。

请帮助解决此问题。

Answer 1

您需要从@ angular / core导入Renderer2

从'@ angular / core'导入{组件，版本，ViewChild，ViewContainerRef，NgModule，编译器，AfterViewInit和Renderer2}