我想动态创建模板.这应该用于ComponentType在运行时构建一个并在托管组件内部放置(甚至替换)它.
直到我使用RC4 ComponentResolver,但RC5我收到消息:
ComponentResolver不推荐用于动态编译.使用ComponentFactoryResolver连同@NgModule/@Component.entryComponents或ANALYZE_FOR_ENTRY_COMPONENTS提供商,而不是.对于仅运行时编译,您也可以使用Compiler.compileComponentSync/Async.
我发现了这个(官方的angular2)文件
并了解我可以使用其中之一
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属性类型的不同数量/日期/引用,跳过一些用户的某些属性......).即这是一个例子,真正的配置可以生成更多不同和复杂的模板.
该 …
我已经尝试加载没有使用路由器的模块SystemJsNgModuleLoader,但无法使其工作:
this.loader.load(url).then(console.info);
我正在Cannot find module xxx使用我用于URL的任何字符串(aboslute/relative urls/paths ...尝试了很多选项).我浏览了一下路由器源代码,然后找不到其他任何东西SystemJsNgModuleLoader.我甚至不确定我应该使用这个......
昨天在ng-europe 2016会议上就提出了这个问题--Miško和Matias回答说:
MiškoHevery: 只需要掌握模块,就可以从那里获得组件工厂,您可以在应用程序中的任何位置动态加载组件工厂.这正是路由器内部所做的事情.因此,你也可以做到这一点.
MatiasNiemelä 唯一值得注意的是,在[Ng]模块上有一些被调用的东西
entryComponents,它可以识别可以延迟加载的组件 - 这是该组件集的入口.所以当你有懒惰加载的模块时,请把东西放进去entryComponents.
......但是,如果没有关于这个问题的例子和糟糕的文档,那就不是那么紧张的前进了;
任何人都知道如何手动加载模块,而不使用Route.loadChildren？如何掌握模块以及应该进入的内容究竟是什么entryComponents(我阅读常见问题解答,但不能在没有实际加载模块的情况下尝试)？
下面是我创建动态模块的初始代码:
protected createComponentModule(componentType: any) {
@NgModule({
imports: [
ComponentModule
],
declarations: [
componentType
],
})
class RuntimeComponentModule {
}
return RuntimeComponentModule;
}
虽然我将在下面的代码上实现AOT,但它会给我一个错误:
找不到'RuntimeComponentModule'的NgModule元数据
我通过更改下面的代码找到了一些Articals的解决方案,我的错误消失了:
default class RuntimeComponentModule
{
}
但是它提出了新的错误:
修饰符不能出现在这里
它不允许我在方法中装饰@NgModule.
我正在尝试做的angular 2.1.0是动态创建应该注入父组件的子组件.例如父组件是lessonDetails包含用于所有课程如像按钮共享的东西Go to previous lesson,Go to next lesson和其他东西.基于路径参数,应该是子组件的课程内容需要动态注入父组件.子组件的HTML(课程内容)在外面的某处定义为普通字符串,它可以是以下对象:
export const LESSONS = {
"lesson-1": `<p> lesson 1 </p>`,
"lesson-2": `<p> lesson 2 </p>`
}
通过innerHtml在父组件模板中使用类似的内容,可以轻松解决问题.
<div [innerHTML]="lessonContent"></div>
在路径参数的每次更改的情况下lessonContent,父组件的属性将改变(将从LESSON对象获取内容(新模板)),从而导致更新父组件模板.这有效,但角度不会处理通过注入的内容,innerHtml因此无法使用routerLink和其他东西.
在新的角度释放之前,我使用来自http://blog.lacolaco.net/post/dynamic-component-creation-in-angular-2/的解决方案解决了这个问题,我一直在使用ComponentMetadata它ComponentResolver来动态创建子组件, 喜欢:
const metadata = new ComponentMetadata({
template: this.templateString,
});
当templateString传递给子组件的Input属性为子组件.双方MetaData并ComponentResolver已被弃用/去掉angular 2.1.0. …