2016-08-30 2 views
2

Я использую пример для динамического создания компонентов в своем приложении.Динамически вставленные дочерние компоненты в Angular 2.0

export class App { 
    @ViewChild('placeholder', {read: ViewContainerRef}) viewContainerRef; 
    private componentFactory: ComponentFactory<any>; 

    constructor(componentFactoryResolver: ComponentFactoryResolver, compiler: Compiler) { 
    this.componentFactory = componentFactoryResolver.resolveComponentFactory(HelloComponent); 
    } 

    addItem() { 
    this.viewContainerRef.createComponent(this.componentFactory, 0); 
    } 
} 

В этом вопрос. Поскольку эти компоненты отслеживаются как @ContentComponents, как я могу вводить данные в этот тип компонентов?

Я стараюсь, как это:

@ContentChildren(TextComponent) components: QueryList<TextComponent>; 

теперь я успешно получить QueryList моего TextComponent-х тогда я попробовать что-то вроде этого:

this.components.forEach(x => x.Message = "Content component"); 

и нет никакого эффекта.

ответ

1

Это следует сделать это:

addItem() { 
    var cmpRef = this.viewContainerRef.createComponent(this.componentFactory, 0); 
    cmpRef.instance.someProp = 'someValue'; 
    cmpRef.instance.someObservable.subscribe(val => this.val = val); 
    } 
+0

Спасибо! Оно работает. Есть ли какие-либо замечания по документации? Я хочу прочитать о функции ViewContainerRef и createComponent. –

+1

AFAIK только https://angular.io/docs/ts/latest/api/core/index/ComponentFactoryResolver-class.html и https://angular.io/docs/ts/latest/api/core/index/ ViewContainerRef-class.html –

Смежные вопросы