我自己也在尝试如何将RC4更新到RC5，因此我偶然发现了这个条目和动态组件创建的新方法，对我来说仍然有点神秘，所以我不会建议任何关于组件工厂解析器的建议。

但是，我能建议的是在这种情况下创建组件的更清晰的方法-只需在模板中使用switch，根据某些条件创建字符串编辑器或文本编辑器，就像这样:

<form [ngSwitch]="useTextarea">
    <string-editor *ngSwitchCase="false" propertyName="'code'" 
                 [entity]="entity"></string-editor>
    <text-editor *ngSwitchCase="true" propertyName="'code'" 
                 [entity]="entity"></text-editor>
</form>

顺便说一下，[prop]表达式中的“[”有一个含义，这表明了一种数据绑定方式，因此，如果你知道你不需要将属性绑定到变量，你可以甚至应该省略这些。

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 = '';
}

看看它的实际应用

这是从服务器生成的动态表单控件的示例。

https://stackblitz.com/edit/angular-t3mmg6

这个例子是在添加组件中的动态表单控件(这是你可以从服务器获取表单控件的地方)。如果你看到addcomponent method，你可以看到表单控件。在这个例子中，我没有使用角材料，但它工作(我使用@ work)。这是angular 6的目标，但在之前的所有版本中都有效。

需要为AngularVersion 5及以上版本添加JITComplierFactory。

谢谢

维贾伊

我有一个简单的例子来展示如何做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

我自己也在尝试如何将RC4更新到RC5，因此我偶然发现了这个条目和动态组件创建的新方法，对我来说仍然有点神秘，所以我不会建议任何关于组件工厂解析器的建议。

但是，我能建议的是在这种情况下创建组件的更清晰的方法-只需在模板中使用switch，根据某些条件创建字符串编辑器或文本编辑器，就像这样:

<form [ngSwitch]="useTextarea">
    <string-editor *ngSwitchCase="false" propertyName="'code'" 
                 [entity]="entity"></string-editor>
    <text-editor *ngSwitchCase="true" propertyName="'code'" 
                 [entity]="entity"></text-editor>
</form>

顺便说一下，[prop]表达式中的“[”有一个含义，这表明了一种数据绑定方式，因此，如果你知道你不需要将属性绑定到变量，你可以甚至应该省略这些。

对于这种特殊情况，使用指令动态创建组件将是更好的选择。 例子:

在您想要创建组件的HTML中

<ng-container dynamicComponentDirective [someConfig]="someConfig"></ng-container>

我将以以下方式处理和设计指令。

const components: {[type: string]: Type<YourConfig>} = {
    text : TextEditorComponent,
    numeric: NumericComponent,
    string: StringEditorComponent,
    date: DateComponent,
    ........
    .........
};

@Directive({
    selector: '[dynamicComponentDirective]'
})
export class DynamicComponentDirective implements YourConfig, OnChanges, OnInit {
    @Input() yourConfig: Define your config here //;
    component: ComponentRef<YourConfig>;

    constructor(
        private resolver: ComponentFactoryResolver,
        private container: ViewContainerRef
    ) {}

    ngOnChanges() {
        if (this.component) {
            this.component.instance.config = this.config;
            // config is your config, what evermeta data you want to pass to the component created.
        }
    }

    ngOnInit() {
        if (!components[this.config.type]) {
            const supportedTypes = Object.keys(components).join(', ');
            console.error(`Trying to use an unsupported type ${this.config.type} Supported types: ${supportedTypes}`);
        }

        const component = this.resolver.resolveComponentFactory<yourConfig>(components[this.config.type]);
        this.component = this.container.createComponent(component);
        this.component.instance.config = this.config;
    }
}

所以在你的组件中，文本，字符串，日期，任何你在HTML中传递的ng-container元素的配置都是可用的。

配置yourConfig可以是相同的，并定义您的元数据。

根据您的配置或输入类型，该指令应相应执行，并从受支持的类型中呈现适当的组件。如果不是，它将记录一个错误。