在Radmin的精彩回答之后，每个使用angular-cli 1.0.0-beta版本的人都需要做一个小小的调整。22岁及以上。

COMPILER_PROVIDERScan不再被导入(详见angular-cli GitHub)。

因此，这里的解决方法是在providers部分完全不使用COMPILER_PROVIDERS和JitCompiler，而是在类型构建器类中使用'@angular/compiler'中的JitCompilerFactory，就像这样:

private compiler: Compiler = new JitCompilerFactory([{useDebug: false, useJit: true}]).createCompiler();

正如您所看到的，它是不可注入的，因此与DI没有依赖关系。这个解决方案也适用于不使用angular-cli的项目。

我有一个简单的例子来展示如何做angular 2 rc6动态组件。

比方说，你有一个动态html template = template1，想要动态加载，首先包装成组件

@Component({template: template1})
class DynamicComponent {}

这里template1作为html，可能包含ng2组件

在rc6中，必须使用@NgModule来包装这个组件。@NgModule，就像anglarJS 1中的module一样，它解耦了ng2应用程序的不同部分，因此:

@Component({
  template: template1,

})
class DynamicComponent {

}
@NgModule({
  imports: [BrowserModule,RouterModule],
  declarations: [DynamicComponent]
})
class DynamicModule { }

(这里导入RouterModule，在我的例子中，有一些路由组件在我的html中，你可以在后面看到)

现在你可以这样编译DynamicModule: this.compiler.compileModuleAndAllComponentsAsync (DynamicModule) ( factory => factory. componentfactories .find(x => x.p omenttype === DynamicComponent)

我们需要把上面的内容放到app. module .ts中来加载，请查看我的app.moudle.ts。 更多详细信息请查看: https://github.com/Longfld/DynamicalRouter/blob/master/app/MyRouterLink.ts和app.moudle.ts

并查看演示:http://plnkr.co/edit/1fdAYP5PAbiHdJfTKgWo?p=preview

如果你只需要一种解析动态字符串和通过选择器加载组件的方法，你可能还会发现ngx-dynamic-hooks库很有用。我最初创建这个是作为个人项目的一部分，但在周围没有看到类似的东西，所以我对它进行了一些优化并将其公之于众。

一些tidbids:

You can load any components into a dynamic string by their selector (or any other pattern of your choice!) Inputs and outputs can be se just like in a normal template Components can be nested without restrictions You can pass live data from the parent component into the dynamically loaded components (and even use it to bind inputs/outputs) You can control which components can load in each outlet and even which inputs/outputs you can give them The library uses Angular's built-in DOMSanitizer to be safe to use even with potentially unsafe input.

值得注意的是，它不像这里的其他响应那样依赖于运行时编译器。因此，您不能使用模板语法。另一方面，这意味着它既可以在JiT和aot模式下工作，也可以在Ivy和旧的模板引擎下工作，而且在一般情况下使用起来更加安全。

在这部《斯塔克布利茨》中可以看到它的作用。

EDIT - 2.3.0相关(2016-12-07)

注意:要获得以前版本的解决方案，请检查这篇文章的历史

这里讨论了类似的主题，相当于Angular 2中的$compile。我们需要使用JitCompiler和NgModule。在这里阅读更多关于Angular2中的NgModule:

Angular 2 RC5 - NgModules、惰性加载和AoT编译

简而言之

有一个工作的活塞/例子(动态模板，动态组件类型，动态模块，JitCompiler，…在行动)

其原理是: 1)创建模板 2)在缓存中找到ComponentFactory -转到7) 3) -创建组件 4) -创建模块 5) -编译模块 6) -返回(和缓存供以后使用)ComponentFactory 7)使用Target和ComponentFactory创建一个动态组件的实例

下面是一个代码片段(更多的代码在这里)-我们的自定义生成器返回刚刚构建/缓存的ComponentFactory和视图目标占位符消费，以创建一个DynamicComponent的实例

  // here we get a TEMPLATE with dynamic content === TODO
  var template = this.templateBuilder.prepareTemplate(this.entity, useTextarea);

  // here we get Factory (just compiled or from cache)
  this.typeBuilder
      .createComponentFactory(template)
      .then((factory: ComponentFactory<IHaveDynamicData>) =>
    {
        // Target will instantiate and inject component (we'll keep reference to it)
        this.componentRef = this
            .dynamicComponentTarget
            .createComponent(factory);

        // let's inject @Inputs to component instance
        let component = this.componentRef.instance;

        component.entity = this.entity;
        //...
    });

简单地说，就是这样。欲了解更多详情..阅读下面的

.

TL&DR

观察一个活塞，然后回来阅读细节，以防一些片段需要更多的解释

.

详细说明- Angular2 rc6++ &运行时组件

下面对这个场景进行描述

create a module PartsModule:NgModule (holder of small pieces) create another module DynamicModule:NgModule, which will contain our dynamic component (and reference PartsModule dynamically) create dynamic Template (simple approach) create new Component type (only if template has changed) create new RuntimeModule:NgModule. This module will contain the previously created Component type call JitCompiler.compileModuleAndAllComponentsAsync(runtimeModule) to get ComponentFactory create an Instance of the DynamicComponent - job of the View Target placeholder and ComponentFactory assign @Inputs to new instance (switch from INPUT to TEXTAREA editing), consume @Outputs

NgModule

我们需要一个ngmodule。

虽然我想展示一个非常简单的例子，但在这种情况下，我需要三个模块(实际上是4个——但我没有计算AppModule)。请将本文而不是简单的代码片段作为真正可靠的动态组件生成器的基础。

所有小组件都有一个模块，例如字符串编辑器、文本编辑器(日期编辑器、数字编辑器……)

@NgModule({
  imports:      [ 
      CommonModule,
      FormsModule
  ],
  declarations: [
      DYNAMIC_DIRECTIVES
  ],
  exports: [
      DYNAMIC_DIRECTIVES,
      CommonModule,
      FormsModule
  ]
})
export class PartsModule { }

其中DYNAMIC_DIRECTIVES是可扩展的，用于保存动态组件模板/类型所使用的所有小部件。检查应用程序/部分/ parts.module.ts

第二个将是模块为我们的动态东西处理。它将包含托管组件和一些提供商..这将是单身。因此，我们将以标准方式发布它们——使用forRoot()

import { DynamicDetail }          from './detail.view';
import { DynamicTypeBuilder }     from './type.builder';
import { DynamicTemplateBuilder } from './template.builder';

@NgModule({
  imports:      [ PartsModule ],
  declarations: [ DynamicDetail ],
  exports:      [ DynamicDetail],
})

export class DynamicModule {

    static forRoot()
    {
        return {
            ngModule: DynamicModule,
            providers: [ // singletons accross the whole app
              DynamicTemplateBuilder,
              DynamicTypeBuilder
            ], 
        };
    }
}

检查AppModule中forRoot()的使用情况

最后，我们将需要一个adhoc，运行时模块。但它将在后面创建，作为DynamicTypeBuilder作业的一部分。

第四个模块，应用程序模块，是一个声明编译器提供程序的模块:

...
import { COMPILER_PROVIDERS } from '@angular/compiler';    
import { AppComponent }   from './app.component';
import { DynamicModule }    from './dynamic/dynamic.module';

@NgModule({
  imports:      [ 
    BrowserModule,
    DynamicModule.forRoot() // singletons
  ],
  declarations: [ AppComponent],
  providers: [
    COMPILER_PROVIDERS // this is an app singleton declaration
  ],

请阅读(务必阅读)更多关于NgModule的内容:

Angular 2 RC5 - NgModules、惰性加载和AoT编译 Angular模块文档

模板构建器

在我们的示例中，我们将处理这种实体的详细信息

entity = { 
    code: "ABC123",
    description: "A description of this Entity" 
};

为了创建一个模板，在这个活塞中，我们使用这个简单/幼稚的构建器。

真正的解决方案，真正的模板构建器，是应用程序可以做很多事情的地方

// plunker - app/dynamic/template.builder.ts
import {Injectable} from "@angular/core";

@Injectable()
export class DynamicTemplateBuilder {

    public prepareTemplate(entity: any, useTextarea: boolean){
      
      let properties = Object.keys(entity);
      let template = "<form >";
      let editorName = useTextarea 
        ? "text-editor"
        : "string-editor";
        
      properties.forEach((propertyName) =>{
        template += `
          <${editorName}
              [propertyName]="'${propertyName}'"
              [entity]="entity"
          ></${editorName}>`;
      });
  
      return template + "</form>";
    }
}

这里的一个技巧是——它构建了一个使用一些已知属性集的模板，例如实体。这样的属性(-ies)必须是我们接下来创建的动态组件的一部分。

为了更简单一点，我们可以使用一个接口来定义属性，我们的模板构建器可以使用这些属性。这将由我们的动态Component类型实现。

export interface IHaveDynamicData { 
    public entity: any;
    ...
}

ComponentFactory构建器

这里很重要的一点是要记住:

我们的组件类型，用DynamicTypeBuilder构建，可能会有所不同——但只是它的模板不同(上面创建的)。组件的属性(输入、输出或某些受保护的属性)仍然相同。如果我们需要不同的属性，我们应该定义不同的模板和类型生成器组合

所以，我们触及了解的核心。Builder将1)创建ComponentType, 2)创建它的NgModule, 3)编译ComponentFactory, 4)缓存它以供以后重用。

我们需要接收的依赖项:

// plunker - app/dynamic/type.builder.ts
import { JitCompiler } from '@angular/compiler';
    
@Injectable()
export class DynamicTypeBuilder {

  // wee need Dynamic component builder
  constructor(
    protected compiler: JitCompiler
  ) {}

下面是如何获取ComponentFactory的代码片段:

// plunker - app/dynamic/type.builder.ts
// this object is singleton - so we can use this as a cache
private _cacheOfFactories:
     {[templateKey: string]: ComponentFactory<IHaveDynamicData>} = {};
  
public createComponentFactory(template: string)
    : Promise<ComponentFactory<IHaveDynamicData>> {    
    let factory = this._cacheOfFactories[template];

    if (factory) {
        console.log("Module and Type are returned from cache")
       
        return new Promise((resolve) => {
            resolve(factory);
        });
    }
    
    // unknown template ... let's create a Type for it
    let type   = this.createNewComponent(template);
    let module = this.createComponentModule(type);
    
    return new Promise((resolve) => {
        this.compiler
            .compileModuleAndAllComponentsAsync(module)
            .then((moduleWithFactories) =>
            {
                factory = _.find(moduleWithFactories.componentFactories
                                , { componentType: type });

                this._cacheOfFactories[template] = factory;

                resolve(factory);
            });
    });
}

上面我们创建并缓存组件和模块。因为如果模板(实际上是真正的动态部分)是相同的..我们可以重复利用

这里有两个方法，它们代表了如何在运行时创建装饰类/类型的非常酷的方式。不仅是@Component，还有@NgModule

protected createNewComponent (tmpl:string) {
  @Component({
      selector: 'dynamic-component',
      template: tmpl,
  })
  class CustomDynamicComponent  implements IHaveDynamicData {
      @Input()  public entity: any;
  };
  // a component for this particular template
  return CustomDynamicComponent;
}
protected createComponentModule (componentType: any) {
  @NgModule({
    imports: [
      PartsModule, // there are 'text-editor', 'string-editor'...
    ],
    declarations: [
      componentType
    ],
  })
  class RuntimeComponentModule
  {
  }
  // a module for just this Type
  return RuntimeComponentModule;
}

重要的是:

我们的组件动态类型不同，但只是根据模板不同。所以我们用这个事实来缓存它们。这真的非常重要。Angular2也会缓存这些..按类型。如果我们要为相同的模板字符串重新创建新类型…我们将开始产生内存泄漏。

宿主组件使用的ComponentFactory

最后一部分是一个组件，它承载动态组件的目标，例如<div #dynamicContentPlaceHolder></div>。我们获取它的引用，并使用ComponentFactory创建一个组件。简而言之，这里是该组件的所有部件(如果需要，在这里打开活塞)

让我们首先总结一下import语句:

import {Component, ComponentRef,ViewChild,ViewContainerRef}   from '@angular/core';
import {AfterViewInit,OnInit,OnDestroy,OnChanges,SimpleChange} from '@angular/core';

import { IHaveDynamicData, DynamicTypeBuilder } from './type.builder';
import { DynamicTemplateBuilder }               from './template.builder';

@Component({
  selector: 'dynamic-detail',
  template: `
<div>
  check/uncheck to use INPUT vs TEXTAREA:
  <input type="checkbox" #val (click)="refreshContent(val.checked)" /><hr />
  <div #dynamicContentPlaceHolder></div>  <hr />
  entity: <pre>{{entity | json}}</pre>
</div>
`,
})
export class DynamicDetail implements AfterViewInit, OnChanges, OnDestroy, OnInit
{ 
    // wee need Dynamic component builder
    constructor(
        protected typeBuilder: DynamicTypeBuilder,
        protected templateBuilder: DynamicTemplateBuilder
    ) {}
    ...

我们只接收模板和组件构建器。下面是示例中需要的属性(详见注释)

// reference for a <div> with #dynamicContentPlaceHolder
@ViewChild('dynamicContentPlaceHolder', {read: ViewContainerRef}) 
protected dynamicComponentTarget: ViewContainerRef;
// this will be reference to dynamic content - to be able to destroy it
protected componentRef: ComponentRef<IHaveDynamicData>;

// until ngAfterViewInit, we cannot start (firstly) to process dynamic stuff
protected wasViewInitialized = false;

// example entity ... to be recieved from other app parts
// this is kind of candiate for @Input
protected entity = { 
    code: "ABC123",
    description: "A description of this Entity" 
  };

在这个简单的场景中，我们的宿主组件没有任何@Input。所以它不必对变化做出反应。但是尽管如此(并且为即将到来的更改做好准备)，如果组件已经(第一次)初始化，我们需要引入一些标志。只有这样，我们才能开始施展魔法。

最后，我们将使用我们的组件构建器，它只是编译/缓存了componentfactory。我们的目标占位符将被要求用该工厂实例化组件。

protected refreshContent(useTextarea: boolean = false){
  
  if (this.componentRef) {
      this.componentRef.destroy();
  }
  
  // here we get a TEMPLATE with dynamic content === TODO
  var template = this.templateBuilder.prepareTemplate(this.entity, useTextarea);

  // here we get Factory (just compiled or from cache)
  this.typeBuilder
      .createComponentFactory(template)
      .then((factory: ComponentFactory<IHaveDynamicData>) =>
    {
        // Target will instantiate and inject component (we'll keep reference to it)
        this.componentRef = this
            .dynamicComponentTarget
            .createComponent(factory);

        // let's inject @Inputs to component instance
        let component = this.componentRef.instance;

        component.entity = this.entity;
        //...
    });
}

小的扩展

此外，我们需要保持一个引用编译模板..能够正确地销毁()它，每当我们要改变它。

// this is the best moment where to start to process dynamic stuff
public ngAfterViewInit(): void
{
    this.wasViewInitialized = true;
    this.refreshContent();
}
// wasViewInitialized is an IMPORTANT switch 
// when this component would have its own changing @Input()
// - then we have to wait till view is intialized - first OnChange is too soon
public ngOnChanges(changes: {[key: string]: SimpleChange}): void
{
    if (this.wasViewInitialized) {
        return;
    }
    this.refreshContent();
}

public ngOnDestroy(){
  if (this.componentRef) {
      this.componentRef.destroy();
      this.componentRef = null;
  }
}

done

差不多就是这样。不要忘记销毁任何动态构建的东西(ngOnDestroy)。此外，如果动态类型和模块的唯一区别是它们的模板，请确保缓存它们。

在这里查看所有的操作

要查看这篇文章的以前版本(例如RC5相关)，请查看历史记录

在Angular 2 Final版本中，通过使用ng-dynamic中的dynamicComponent指令解决了这个问题。

用法:

<div *dynamicComponent="template; context: {text: text};"></div>

其中template是您的动态模板，context可以设置为您希望模板绑定到的任何动态数据模型。

2019年6月答案

好消息!看起来@angular/cdk包现在对门户提供了一流的支持!

在撰写本文时，我并没有发现上面的官方文档有什么特别的帮助(特别是在向动态组件发送数据和从动态组件接收事件方面)。总之，你需要:

步骤1)更新AppModule

从@angular/cdk/portal包中导入PortalModule，在entryComponents中注册你的动态组件

@NgModule({
  declarations: [ ..., AppComponent, MyDynamicComponent, ... ]
  imports:      [ ..., PortalModule, ... ],
  entryComponents: [ ..., MyDynamicComponent, ... ]
})
export class AppModule { }

步骤2。选项A:如果你不需要向动态组件传递数据和从动态组件接收事件:

@Component({
  selector: 'my-app',
  template: `
    <button (click)="onClickAddChild()">Click to add child component</button>
    <ng-template [cdkPortalOutlet]="myPortal"></ng-template>
  `
})
export class AppComponent  {
  myPortal: ComponentPortal<any>;
  onClickAddChild() {
    this.myPortal = new ComponentPortal(MyDynamicComponent);
  }
}

@Component({
  selector: 'app-child',
  template: `<p>I am a child.</p>`
})
export class MyDynamicComponent{
}

看看它的实际应用

步骤2。选项B:如果你确实需要向动态组件传递数据并从动态组件接收事件:

// A bit of boilerplate here. Recommend putting this function in a utils 
// file in order to keep your component code a little cleaner.
function createDomPortalHost(elRef: ElementRef, injector: Injector) {
  return new DomPortalHost(
    elRef.nativeElement,
    injector.get(ComponentFactoryResolver),
    injector.get(ApplicationRef),
    injector
  );
}

@Component({
  selector: 'my-app',
  template: `
    <button (click)="onClickAddChild()">Click to add random child component</button>
    <div #portalHost></div>
  `
})
export class AppComponent {

  portalHost: DomPortalHost;
  @ViewChild('portalHost') elRef: ElementRef;

  constructor(readonly injector: Injector) {
  }

  ngOnInit() {
    this.portalHost = createDomPortalHost(this.elRef, this.injector);
  }

  onClickAddChild() {
    const myPortal = new ComponentPortal(MyDynamicComponent);
    const componentRef = this.portalHost.attach(myPortal);
    setTimeout(() => componentRef.instance.myInput 
      = '> This is data passed from AppComponent <', 1000);
    // ... if we had an output called 'myOutput' in a child component, 
    // this is how we would receive events...
    // this.componentRef.instance.myOutput.subscribe(() => ...);
  }
}

@Component({
  selector: 'app-child',
  template: `<p>I am a child. <strong>{{myInput}}</strong></p>`
})
export class MyDynamicComponent {
  @Input() myInput = '';
}

看看它的实际应用