Angular RC 2-从json文件动态渲染组件

Question

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:无法读取null 的属性"query">

谢谢你的帮助！

如果你想下载并尝试一下，这里有一个链接：

https://github.com/weswhite/ng2-layout

编辑/更新：这可能与孩子有关：任何我正在注射的东西。我觉得我做得不对，还在想。。。

Answer 1

您可以将ComponentResolver与子ViewContainerRef一起使用，以动态创建组件并将其加载到父组件中。

@Component({
selector: 'parent',
providers: [ParentService],
template: `
<style>
.parent{
background-image: linear-gradient(141deg, #8ecb45 0%, #97cd76 71%, #96d885 100%);
width: 100%;
height: 200px;
}
</style>
<div #content></div>
`
})
export class ParentComponent {
@ViewChild('content', { read: ViewContainerRef }) contentContainer: ViewContainerRef;
children: Component[];
constructor(
private parentService:ParentService,
private resolver: ComponentResolver) {
this.children = parentService.getChildren();
}
ngOnInit() {
this.children.forEach( (component, index) => this.loadComponent(component, index));
}
private loadComponent(component: Component, index: number) {
return this
.resolver
.resolveComponent(component)
.then( factory => 
this.contentContainer.createComponent(factory, index, this.contentContainer.injector))
}
}

我还升级了提供的plunker，使其使用最新的@angular和ComponentResolver，而不是DynamicComponentLoader：Plunker：http://plnkr.co/edit/Z6bXwBcwAnf4DSpNlU8H?p=preview

使用带有loadNextTollocation的DCL：http://plnkr.co/edit/NYgJzz9UjrtGsNnO5WXS?p=info

p.S:您得到的是TypeError:无法读取null的属性'query'，因为您注入children的方式，您必须指定一个可注入的类型。

另请参阅Angular 2动态选项卡和用户点击选择的组件

Answer 2

我很确定你在问题中提到的错误消息是由这个参数引起的

private children: any,

Angular不能在没有提供具体类型并且没有@Inject(...)注释的情况下注入依赖项。

更新

包装类能够以声明方式添加动态组件的完整示例

@Component({
selector: 'dcl-wrapper',
template: `<div #target></div>`
})
export class DclWrapper {
@ViewChild('target', {read: ViewContainerRef}) target;
@Input() type;
cmpRef:ComponentRef;
private isViewInitialized:boolean = false;
constructor(private resolver: ComponentResolver) {}
updateComponent() {
if(!this.isViewInitialized) {
return;
}
if(this.cmpRef) {
this.cmpRef.destroy();
}
this.resolver.resolveComponent(this.type).then((factory:ComponentFactory<any>) => {
this.cmpRef = this.target.createComponent(factory)
});
}
ngOnChanges() {
this.updateComponent();
}
ngAfterViewInit() {
this.isViewInitialized = true;
this.updateComponent();  
}
ngOnDestroy() {
if(this.cmpRef) {
this.cmpRef.destroy();
}    
}
}

发件人https://stackoverflow.com/a/36325468/217408

Plunker示例RC.1

Plunker示例测试版17