编辑 - 与2.3.0相关（2016-12-07）
注意：要获得以前版本的解决方案，请查看此帖子的历史记录
此处讨论了类似的主题Angular 2 中的 $compile 等效项。我们需要使用JitCompiler和NgModule。在此处阅读有关NgModuleAngular2 的更多信息：
简而言之
有一个有效的插件/示例 （动态模板，动态组件类型，动态模块JitCompiler，......在行动）
原则是：
1）创建模板
2）ComponentFactory在缓存中查找-转到7）
3） - 创建Component
4） - 创建Module
5） - 编译Module
6） - 返回（并缓存供以后使用）ComponentFactory
7）使用目标并ComponentFactory创建实例动态的Component
这是一个代码片段（更多内容在这里） - 我们的自定义构建器返回刚刚构建/缓存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
观察一个 plunker 并回来阅读详细信息，以防某些片段需要更多解释
.
详解——Angular2 RC6++ &运行时组件
下面描述这个场景，我们将
- 创建一个模块
PartsModule:NgModule （小块的持有人）
- 创建另一个模块
DynamicModule:NgModule，它将包含我们的动态组件（并PartsModule动态引用）
- 创建动态模板（简单方法）
- 创建新
Component类型（仅当模板已更改时）
- 创建新的
RuntimeModule:NgModule. 该模块将包含先前创建的Component类型
- 打电话
JitCompiler.compileModuleAndAllComponentsAsync(runtimeModule)获取ComponentFactory
- 创建
DynamicComponentView Target 占位符的作业的实例和ComponentFactory
- 分配
@Inputs给新实例 （从编辑切换INPUT到TEXTAREA编辑），使用@Outputs
模块
我们需要一个NgModules。
虽然我想展示一个非常简单的示例，但在这种情况下，我需要三个模块（实际上是 4 个 - 但我不计算 AppModule）。请把这个而不是一个简单的片段作为一个真正可靠的动态组件生成器的基础。
所有小组件都会有一个模块，例如string-editor，text-editor （date-editor，number-editor...）
@NgModule({
imports: [
CommonModule,
FormsModule
],
declarations: [
DYNAMIC_DIRECTIVES
],
exports: [
DYNAMIC_DIRECTIVES,
CommonModule,
FormsModule
]
})
export class PartsModule { }
哪里DYNAMIC_DIRECTIVES是可扩展的，旨在容纳用于我们的动态组件模板/类型的所有小部分。检查app/parts/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
],
};
}
}
检查中的使用forRoot()情况AppModule
最后，我们将需要一个临时的运行时模块.. 但这将在稍后创建，作为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的信息：
模板生成器
在我们的示例中，我们将处理此类实体的详细信息
entity = {
code: "ABC123",
description: "A description of this Entity"
};
要创建一个template，在这个plunker中，我们使用这个简单/天真的构建器。
真正的解决方案，真正的模板构建器，是您的应用程序可以做很多事情的地方
// 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>";
}
}
这里的一个技巧是 - 它构建了一个使用一组已知属性的模板，例如entity. 这样的属性（-ies）必须是我们接下来要创建的动态组件的一部分。
为了使它更容易一点，我们可以使用一个接口来定义我们的模板构建器可以使用的属性。这将由我们的动态组件类型实现。
export interface IHaveDynamicData {
public entity: any;
...
}
ComponentFactory建设者_
这里非常重要的是要记住：
我们的组件类型，使用 our 构建DynamicTypeBuilder，可能会有所不同 - 但仅取决于其模板（在上面创建）。组件的属性（输入、输出或某些受保护的）仍然相同。如果我们需要不同的属性，我们应该定义不同的模板和类型生成器组合
因此，我们正在触及解决方案的核心。Builder 将 1）创建ComponentType2）创建它的NgModule3）编译ComponentFactory4）缓存它以供以后重用。
我们需要接收的依赖项：
// 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和Module。因为如果模板（实际上是真正的动态部分）是相同的..我们可以重用
这里有两种方法，它们代表了如何在运行时创建装饰类/类型的非常酷的方法。不仅如此@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来创建一个组件。简而言之，这里是该组件的所有部分（如果需要，请在此处打开 plunker）
我们先总结一下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. 所以它不必对变化做出反应。但是尽管有这个事实（并为即将发生的变化做好准备） - 如果组件已经（首先）启动，我们需要引入一些标志。只有这样我们才能开始魔术。
最后，我们将使用我们的组件构建器，它刚刚编译/缓存 ComponentFacotry。我们的Target 占位符将被要求用该工厂实例化。Component
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;
//...
});
}
小扩展
destroy()此外，我们需要保留对已编译模板的引用......以便在我们更改它时能够正确使用它。
// 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;
}
}
完毕
差不多就是这样。不要忘记销毁任何动态构建的东西(ngOnDestroy)。此外，请务必缓存动态types，modules如果唯一的区别是它们的模板。
在这里检查一切
要查看此帖子的先前版本（例如 RC5 相关） ，请查看历史记录