Angular5动态组件创建及集成PrimeNG第三方模块的技术问询

我来帮你把这个需求落地，下面是完整的实现思路和代码示例，基于你提供的基础代码扩展而来：

1. 完善动态组件创建逻辑 #

首先，我们需要把基础的组件创建逻辑扩展，支持传入自定义模板，同时让组件能正常接收数据、依赖注入，还要能识别PrimeNG的组件指令。

import { Component, Compiler, Injector, NgModule, ViewContainerRef } from '@angular/core';
// 导入你需要的PrimeNG模块
import { ButtonModule } from 'primeng/button';
import { InputTextModule } from 'primeng/inputtext';

@Component({
  selector: 'app-dynamic-component-host',
  template: '<div #container></div>'
})
export class DynamicComponentHostComponent {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private compiler: Compiler, private injector: Injector) {}

  private createComponentFromRaw(template: string = `<p>hello</p>`) {
    // 清空容器，避免重复创建组件堆积
    this.container.clear();

    // 1. 创建动态组件类，支持自定义模板
    const DynamicComponent = Component({
      template: template
    })(class {
      // 这里可以按需添加@Input()、@Output()或者注入服务
      // 示例：@Input() dynamicData: any;
      // 示例：constructor(private authService: AuthService) {}
    });

    // 2. 创建动态模块，必须导入PrimeNG所需模块才能让动态组件识别其组件
    @NgModule({
      declarations: [DynamicComponent],
      imports: [
        ButtonModule, // 注册PrimeNG按钮模块
        InputTextModule // 注册PrimeNG输入框模块
        // 按需添加其他PrimeNG模块，比如DropdownModule、CalendarModule等
      ]
    })
    class DynamicModule {}

    // 3. 编译模块和组件，然后在容器中创建组件实例
    this.compiler.compileModuleAndAllComponentsAsync(DynamicModule)
      .then(factory => {
        const componentFactory = factory.componentFactories.find(f => f.componentType === DynamicComponent);
        const componentRef = this.container.createComponent(componentFactory, 0, this.injector);
        
        // 如果需要给动态组件传递数据，这里可以赋值
        // componentRef.instance.dynamicData = { title: 'PrimeNG动态组件' };
      });
  }

  // 示例：调用此方法生成包含PrimeNG组件的动态组件
  createPrimeNGDynamicComponent() {
    const primeNGTemplate = `
      <div style="padding: 20px;">
        <h4>动态PrimeNG组件演示</h4>
        <p-inputText style="margin-right: 10px;" placeholder="请输入内容"></p-inputText>
        <p-button label="提交" (click)="console.log('按钮被点击')"></p-button>
      </div>
    `;
    this.createComponentFromRaw(primeNGTemplate);
  }
}

2. 关键注意事项 #

• PrimeNG模块注册：必须在动态模块的imports数组中导入你要使用的PrimeNG模块，否则动态组件无法识别<p-button>这类PrimeNG组件选择器。
• 模板字符串规范：如果模板中包含引号或特殊字符，要注意使用模板字符串的正确写法，避免语法错误。
• 容器管理：每次创建新组件前清空容器，防止旧组件残留占用资源。
• 数据传递：如果需要给动态组件传值，在动态组件类中定义@Input()属性后，通过componentRef.instance即可完成赋值。

3. 使用方式 #

在父组件中调用createPrimeNGDynamicComponent()方法，就能生成包含PrimeNG组件的动态组件了。如果需要自定义模板，直接传入对应的字符串模板即可。

内容的提问来源于stack exchange，提问作者raju