访问动态添加的许多不同组件

时间:2016-06-28 09:08:14

标签: angular components

在我的组件中,我使用ComponentResolverComponentFactory动态添加不同的组件,我的问题是,是否有办法像@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;                
            }); 
    }

}

0 个答案:

没有答案