如何使用/创建动态模板以使用Angular 2.0编译动态组件？

角度的 TypeScript

Me无敌

2020-05-25

我想动态创建一个模板。应该使用它ComponentType在运行时构建一个并将其放置（甚至替换）在宿主组件内部的某个位置。

在使用RC4之前ComponentResolver，使用RC5时会收到以下消息：

ComponentResolver is deprecated for dynamic compilation.
Use ComponentFactoryResolver together with @NgModule/@Component.entryComponents or ANALYZE_FOR_ENTRY_COMPONENTS provider instead.
For runtime compile only, you can also use Compiler.compileComponentSync/Async.

我找到了这个文档（Angular 2同步动态组件创建）

并了解我可以使用

  • 一种动态的ngIf用ComponentFactoryResolver。如果我在内部传递了已知组件@Component({entryComponents: [comp1, comp2], ...})-我可以使用.resolveComponentFactory(componentToRender);
  • 实时运行时编译，具有Compiler...

但是问题是如何使用它Compiler？上面的注释说我应该打电话：Compiler.compileComponentSync/Async-那怎么办？

例如。我想（根据某些配置条件）为一种设置创建这种模板

<form>
   <string-editor
     [propertyName]="'code'"
     [entity]="entity"
   ></string-editor>
   <string-editor
     [propertyName]="'description'"
     [entity]="entity"
   ></string-editor>
   ...

在另一种情况下，这个（string-editor被替换为text-editor）

<form>
   <text-editor
     [propertyName]="'code'"
     [entity]="entity"
   ></text-editor>
   ...

依此类推（editors根据属性类型使用不同的数字/日期/引用，为某些用户跳过某些属性...）。即，这是一个示例，实际配置可以生成更多不同和复杂的模板。

模板正在更改，因此我无法使用ComponentFactoryResolver和传递现有模板...我需要使用解决方案Compiler。

第4167篇《如何使用/创建动态模板以使用Angular 2.0编译动态组件？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
Mandy村村 2020.05.25

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

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

此示例是动态的Form控件位于添加组件中（您可以在此处从服务器获取Formcontrols）。如果看到addcomponent方法，则可以看到窗体控件。在此示例中，我没有使用角形材料，但是它可以工作（我使用@ work）。这是角度6的目标，但适用于所有以前的版本。

需要为AngularVersion 5及更高版本添加JITComplierFactory。

谢谢

维杰

飞羽 2020.05.25

遵循Radmin的出色答案，对于使用angular-cli版本1.0.0-beta.22及更高版本的每个人都需要进行一些调整。

COMPILER_PROVIDERS不能再导入（有关详细信息，请参见angular-cli GitHub）。

因此，解决方法是根本不使用COMPILER_PROVIDERS和JitCompiler在本providers节中，而是JitCompilerFactory在类型生成器类中使用@@ angular / compiler代替：

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

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

路易Harry 2020.05.25

只需使用ng-dynamic的dynamicComponent指令即可在Angular 2 Final版本中解决此问题。

用法：

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

模板是您的动态模板，可以将上下文设置为您希望模板绑定到的任何动态数据模型。

卡卡西 2020.05.25

我有一个简单的示例来演示如何做角度2 rc6动态分量。

假设您有一个动态的html template = template1，并且要动态加载，首先要包装到组件中

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

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

从rc6开始，必须让@NgModule包装该组件。@NgModule，就像AnglarJS 1中的模块一样，它将ng2应用程序的不同部分解耦，所以：

@Component({
  template: template1,

})
class DynamicComponent {

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

（在这里导入RouterModule就像我的示例一样，在我的html中有一些路由组件，稍后您将看到）

现在，您可以将DynamicModule编译为： this.compiler.compileModuleAndAllComponentsAsync(DynamicModule).then( factory => factory.componentFactories.find(x => x.componentType === DynamicComponent))

我们需要在app.moudule.ts中放入上面的内容以进行加载，请参阅我的app.moudle.ts。有关更多详细信息，请访问：https : //github.com/Longfld/DynamicalRouter/blob/master/app/MyRouterLink.ts和app.moudle.ts

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android