相关疑难解决方法(0)

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

我想动态创建模板.这应该用于ComponentType运行时构建一个并在托管组件内部放置(甚至替换)它.

直到我使用RC4 ComponentResolver,但RC5我收到消息:

ComponentResolver不推荐用于动态编译.使用ComponentFactoryResolver连同@NgModule/@Component.entryComponents或ANALYZE_FOR_ENTRY_COMPONENTS提供商,而不是.对于仅运行时编译,您也可以使用Compiler.compileComponentSync/Async.

我发现了这个(官方的angular2)文件

Angular 2同步动态组件创建

并了解我可以使用其中之一

  • 一种动态的ngIfComponentFactoryResolver.如果我将已知组件传递到托管内部@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>
   ...
Run Code Online (Sandbox Code Playgroud)

在另一种情况下这个(string-editor被替换text-editor)

<form>
   <text-editor
     [propertyName]="'code'"
     [entity]="entity"
   ></text-editor>
   ...
Run Code Online (Sandbox Code Playgroud)

等等(editors属性类型的不同数量/日期/引用,跳过一些用户的某些属性......).即这是一个例子,真正的配置可以生成更多不同和复杂的模板.

该 …

compilation typescript angular2-compiler angular

185
推荐指数
10
解决办法
13万
查看次数

如何将动态外部组件加载到Angular应用程序中

我遇到了Angular应用程序的问题.

我想用(aot)的Typscript构建一个角度应用程序.

目的是显示带有一些小部件的用户仪表板.小部件是角度组件.

我的应用程序附带了一些嵌入式小部件.但小部件应该通过像市场这样的东西来扩展; 或手动创建.

市场应该将文件(js/ts/bunlde .. ??)下载到特定的文件夹中.

然后我的应用程序应该能够加载新的小部件(= ng组件)并实例化它们.

我的文件夹结构(制作)

  |- index.html
  |- main.f5b448e73f5a1f3f796e.bundle.js
  |- main.f5b448e73f5a1f3f796e.bundle.js.map
  |- .... (all other files generated)
  |- externalWidgets
      |- widgetA
            |- widjetA.js
            |- widjetA.js.map
            |- assets
                 |- image.png
      |- widgetB
            |- widjetB.ts
            |- widjetB.html
            |- widjetB.css
Run Code Online (Sandbox Code Playgroud)

然后在加载用户页面时,数据库说有一个widgetA.因此,目标是动态加载文件和instanciate包含的组件.

我尝试过很多解决方案,使用"require"和"System.import",但是当动态生成加载路径时,两者都失败了.

这应该是可能的吗?我可以改变我的代码结构; 更改外部小部件..(例如,widgetB尚未转换,...​​)

事实上,我正在寻找一个带有Angular4/webpack应用程序的"插件系统".

plugins runtime typescript webpack angular

8
推荐指数
1
解决办法
1万
查看次数