DynamicComponentLoader 已被弃用。我正在尝试构建一个父组件,它根据一组子组件在父组件内呈现子组件,这意味着每个用户都有一个设置文件,其中包含需要在父组件中的子组件。现在父母看起来像这样:
import { Component, OnInit, Input, ComponentResolver, ViewContainerRef } from '@angular/core';
import { Child1Component } from '../children/child1.component'
import { Child2Component } from '../children/child2.component'
import { Child3Component } from '../children/child3.component'
import { ParentService } from './parent.service'
@Component({
selector: 'parent',
directives: [Child1Component, Child2Component, Child3Component],
providers: [ParentService],
template: `
<style>
.parent{
background-image: linear-gradient(141deg, #8ecb45 0%, #97cd76 71%, #96d885 100%);
width: 100%;
height: 200px;
}
</style>
<div class="parent"></div>
`
})
export class ParentComponent {
constructor(private parentService:ParentService, private children: any, viewContainer: ViewContainerRef, private componentResolver: ComponentResolver) {
this.children = parentService.getChildren();
for(var i = 0; i < children.length; i++) {
this.componentResolver.resolveComponent(children[i].component)
.then(componentFactory => {
const ctxInjector = viewContainer.injector;
return viewContainer.createComponent(componentFactory, 0, ctxInjector);
})
}
}
}
现在,在 ParentComponent 构造函数中调用服务似乎会导致一些问题。但是在我对 componentResolver 进行循环之前,我能够在父节点下方附加一个组件,但不能在其中附加一个组件。
有谁知道构建动态父组件的更好方法?这是为了管理布局的仪表板类型。大多数示例都明确说明将加载多少组件。这对我不起作用。我已经看过一些关于如何完成这项工作的帖子,但到目前为止,我还没有看到任何在 RC 上运行带有配置文件的东西。
这最接近我想要做的事情:http ://plnkr.co/edit/jAmMZKz2VqponmFtPpes?p=preview 但它使用 dcl ...
目前,我在启动应用程序时遇到了一个我没有发现的错误:TypeError: Cannot read property 'query' of null
谢谢您的帮助!
如果您想下载并尝试一下,请点击以下链接:
https://github.com/weswhite/ng2-layout
编辑/更新:这可能与孩子们有关:我注射的任何东西。我不认为我这样做是正确的,仍然弄清楚那一点......