在我的组件中,我使用ComponentResolver
和ComponentFactory
动态添加不同的组件,我的问题是,是否有办法像@ViewChildren
一样访问所有这些组件?
@ViewChildren(AImageContentComponent)
< ---你可以将数组传递给它吗?
import {Component,ViewChild,ViewContainerRef,ComponentFactory,ComponentResolver,ViewChildren,QueryList} from '@angular/core';
import {Child1} from './child1.component';
import {Child2} from './child2.component';
import {Child3} from './child3.component';
@Component({
selector: 'authoring-phone',
template: `
<div (click)="loadContent()" class="phone">
<div class="phone-screen">
<div #target></div>
</div>
</div>
`
})
export class ParentComponent{
@ViewChild('target', {read: ViewContainerRef}) target;
@ViewChildren(????????) <------
allComponents: QueryList<???????>;<--------
contentType;
constructor(private resolver: ComponentResolver, private viewContainerRef: ViewContainerRef, private _authoringService:AuthoringService)
{
}
addContent(type)
{
switch (type)
{
case 'child1' :
this.contentType = Child1;
this.addContentComponent();
break;
case 'child2' :
this.contentType = Child2;
this.addContentComponent();
break;
case 'child3' :
this.contentType = Child3;
this.addContentComponent();
break;
}
}
addContentComponent()
{
this.resolver.resolveComponent(this.contentType).then(
(factory:ComponentFactory<any>) => {
var cmpRef = this.target.createComponent(factory);
var cmp = cmpRef.instance;
});
}
}