ViewContainerRef не загружает компонент в DOM

Question

@Component({ 
    selector: 'my-cmp', 
    template: ` 
    <div #target></div> 
    ` 
}) 
export class MyCmp { 
@ViewChild('target', {read: ViewContainerRef}) target : ViewContainerRef; 

render() { 
    let cmp = Component(metadata)(type); 
    this.componentResolver.resolveComponent(cmp).then(factory => { 
     let component = this.target.createComponent(factory, 0, null, null); 
    }); 
    } 
} 

Я пытаюсь загрузить компонент в ViewContainerRef. Все documentation говорит, что после создания компонента он автоматически загружается в DOM (где находится ViewChild.) Но это не происходит. Зачем? Пожалуйста помоги.

Answer 1

Не уверен, что если вы добавили код завершения или только часть его, я не вижу ComponentResolver впрыскивается в конструктор, а также может быть опечатки здесь, но resolveComponent то блок не закрыт (отсутствует )).

import { Component, ViewChild, ViewContainerRef, ComponentResolver } from '@angular/core'; 

@Component({ 
    selector: 'my-test', 
    template: ` 
    Test Component 
    ` 
}) 
export class TestComponent {} 

@Component({ 
    selector: 'my-app', 
    template: `<h3 class="title">Basic Angular 2</h3> 
    <div #target></div> 
    ` 
}) 
export class AppComponent { 
    @ViewChild('target', {read: ViewContainerRef}) target : ViewContainerRef; 

    constructor(private componentResolver: ComponentResolver){ 
    this.render(); 
    } 

    render =() => { 
    // include app specific logic to get ComponentType 
    // let cmp = Component(metadata)(type); 
    this.componentResolver.resolveComponent(TestComponent).then(factory => { 
     let component = this.target.createComponent(factory, 0, null, null); 
    }); 
    } 
    } 

Вот Plunker!!

Надеется, что это помогает !!

Answer 2

@Component({ 
    selector: 'my-app', 
    providers: [], 
    template: ` 
    <div> 
     <h2>Dynamicaly Add Elements</h2> 
     <button (click)="addItem()">add hello</button> 
     <div #placeholder></div> 
    </div> 
    `, 
    entryComponents: [HelloComponent] 
}) 
export class App { 
    @ViewChild('placeholder', {read: ViewContainerRef}) viewContainerRef; 
    private componentFactory: ComponentFactory<any>; 

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

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

Plunker example