Angular2+动态生成组件：如何管理TypeScript代码？

我明白你现在已经能动态设置组件的HTML模板，但还不知道怎么把存储的TypeScript代码（tsTemplate）整合进去。其实核心就是把你的tsTemplate代码片段注入到动态生成的组件类中，下面是具体的实现步骤和修改后的代码：

核心思路 #

你当前的代码里创建了一个空的组件类class {}，我们需要把存储的tsTemplate内容作为这个类的属性和方法，让动态组件拥有对应的逻辑能力。

修改后的完整代码 #

import { Component, OnInit, OnDestroy, ComponentRef, ViewChild, ViewContainerRef, Compiler, Injector, NgModuleRef, NgModule } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { Application } from '../application.model';
import { ApplicationService } from '../application.service';

@Component({
  selector: 'app-app-frame',
  templateUrl: './app-frame.component.html',
  styleUrls: ['./app-frame.component.css']
})
export class AppFrameComponent implements OnInit, OnDestroy {
  @ViewChild('vc', { read: ViewContainerRef }) _container: ViewContainerRef;
  application: Application;
  appIndex: number;
  cmpRef: ComponentRef<any>;

  constructor(
    private route: ActivatedRoute, 
    private applicationService: ApplicationService, 
    private _compiler: Compiler, 
    private _injector: Injector, 
    private _m: NgModuleRef<any> 
  ) { }

  ngOnInit() {
    this.appIndex = +this.route.snapshot.params['id'];
    this.application = this.applicationService.getApp(this.appIndex);
    
    this.route.params.subscribe( (params: Params)=>{
      this.appIndex = params['id'];
      this.application = this.applicationService.getApp(params['id']);
      
      if(this.cmpRef) {
        this.cmpRef.destroy();
      }

      // --- 修改的核心部分开始 ---
      const template = this.application.htmlTemplate;
      const tsTemplate = this.application.tsTemplate;

      // 构建包含tsTemplate逻辑的组件类代码
      const componentClassCode = `
        class DynamicComponent {
          // 这里可以预先定义你需要传递的属性，比如name
          name: string;
          // 注入存储的TypeScript代码片段
          ${tsTemplate}
        }
      `;

      // 通过Function构造函数生成组件类（注意：仅在可信模板场景下使用）
      const DynamicComponent = new Function('', `return ${componentClassCode}`)();

      // 创建动态组件和模块
      const tmpCmp = Component({ template: template })(DynamicComponent);
      const tmpModule = NgModule({ declarations: [tmpCmp] })(class {});
      // --- 修改的核心部分结束 ---

      this._compiler.compileModuleAndAllComponentsAsync(tmpModule)
        .then((factories) => {
          const f = factories.componentFactories[0];
          this.cmpRef = f.create(this._injector, [], null, this._m);
          // 传递属性到动态组件实例
          this.cmpRef.instance.name = this.application.name;
          this._container.insert(this.cmpRef.hostView);
        })
    });
  }

  ngOnDestroy() {
    if(this.cmpRef) {
      this.cmpRef.destroy();
    }
  }
}

关键说明 #

1. tsTemplate的格式要求：你的tsTemplate需要是合法的类成员代码，比如：

   // 示例tsTemplate内容
   greet(): void {
     alert('Hello ' + this.name);
   }
   count: number = 0;
   increment(): void {
     this.count++;
   }
   

   不能包含全局代码，必须是组件类内部的属性或方法定义。

2. 安全注意事项：使用new Function执行字符串代码存在安全风险，务必确保tsTemplate的来源是完全可信的，避免注入恶意代码。

3. 依赖注入支持：如果你的tsTemplate需要使用Angular服务（比如HttpClient），需要在动态组件的构造函数中声明注入，同时确保临时模块导入了对应的模块：

   // 示例tsTemplate包含依赖注入
   constructor(private http: HttpClient) {}
   fetchData(): void {
     this.http.get('/api/data').subscribe(res => console.log(res));
   }
   
   // 对应的临时模块需要导入HttpClientModule
   const tmpModule = NgModule({
     declarations: [tmpCmp],
     imports: [HttpClientModule]
   })(class {});
   

4. Angular版本兼容：如果使用Angular 9+的Ivy编译器，动态编译的API可能有变化。如果遇到编译问题，可以尝试探索Angular官方提供的动态组件替代方案，或者临时启用enableIvy: false（不推荐长期使用）。

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