我有一个“仪表板”,可以加载配置的元素.
仪表板模板具有：
仪表板模板具有：
<div class="dash-container" [ngGrid]="gridConfig">
<div *ngFor="let Box of Boxes; let i = index"
[(ngGridItem)]="Box.config"
(onItemChange)="updateItem(i,$event)"
(onResize)="onResize(i,$event)"
(onDrag)="onDrag(i,$event)"
(onDragStop)="onDragStop(i,$event)"
[ngClass]="Box.class"
>
<div class="handle"><h4>{{Box.title}}</h4></div>
<div [innerHTML]= "Box.content"></div>
</div>
</div>
现在< div [innerHTML] =“Box.content”>< / div>不起作用,因为非标准元素被消毒.
运行最新的Angular 2.4.6(RC 6).
我看一下我能找到的动态组件的例子 – 但我所看到的只是他们只是将组件添加到当前组件 – 但我需要它们在一个非常特定的div中,如上例所示.
ComponentFactoryResolver通常与@ViewChild一起使用.
但我不能在一个循环中这样做：
ngAfterViewInit() {
const dashWidgetsConf = this.widgetConfigs();
for (var i = 0; i < dashWidgetsConf.length; i++) {
const conf = dashWidgetsConf[i];
@ViewChild(conf.id,{read: ViewContainerRef}) var widgetTarget: ViewContainerRef;
var widgetComponent = this.componentFactoryResolver.resolveComponentFactory(UnitsComponent);
widgetTarget.createComponent(widgetComponent);
}
}
@viewchild给’装饰者在这里无效’.
如何从conf列表中加载组件(在循环中)并将它们添加到我的组件中的特定div(div得到#{{conf.id}})中？
经过一番研究,这是我提出的解决方案(工作在角4.0.0).
原文链接：https://www.f2er.com/angularjs/141479.html按ID加载所有ViewContainerRef目标：
@ViewChildren('dynamic',{read: ViewContainerRef}) public widgetTargets: QueryList<ViewContainerRef>;
然后遍历它们以获取目标,为组件创建工厂并调用createComponent.
也可以使用组件引用来订阅或设置其他组件属性.
ngAfterViewInit() {
const dashWidgetsConf = this.widgetConfigs();
const widgetComponents = this.widgetComponents();
for (let i = 0; i < this.widgetTargets.toArray().length; i++) {
let conf = dashWidgetsConf[i];
let component = widgetComponents[conf.id];
if(component) {
let target = this.widgetTargets.toArray()[i];
let widgetComponent = this.componentFactoryResolver.resolveComponentFactory(component);
let cmpRef: any = target.createComponent(widgetComponent);
if (cmpRef.instance.hasOwnProperty('title')) {
cmpRef.instance.title = conf.title;
}
}
}
}
widgetComponents是一个对象{key：component},widgetConfigs是我存储特定组件信息的地方 – 比如标题,组件ID等.
然后在模板中：
<div *ngFor="let Box of Boxes; let i = index" > <ng-template #dynamic></ng-template> </div>
目标的顺序与我的conf中的顺序相同(框是从它生成的) – 这就是为什么我可以按顺序循环它们并使用i作为索引来获得正确的conf和组件.
