elementRef.createComponent не является функцией

Question

Я пытаюсь загрузить компонент spinner динамически одним нажатием кнопки.

Plunker ссылка здесь,

http://plnkr.co/edit/UEEQQRzX7RIkSO49rCHu?p=preview

let elementRef: ElementRef = this.appRef['_rootComponents'][0].location; 

    return this.startInside(elementRef, null); 

Я получаю ниже ошибки:

elementRef.createComponent is not a function.

Пожалуйста, предложите!

Answer 1

Я адаптировал plunkr и раздвоенный его here, но в итоге вы должны сделать это:

Добавить заполнитель в шаблон, а затем назначить его в качестве @ViewChild и передать на службу. Вот app.ts Сейчас:

@Component({ 
    selector: 'my-app', 
    providers: [SpinnerService], 
    template: ` 
    <div> 
     <button type="button" (click)="showSpinner()">Show Spinner</button> 
     <div #spinner></div> 
    </div> 
    ` 
}) 
export class App { 
    @ViewChild('spinner', { read: ViewContainerRef }) container: ViewContainerRef;  

    constructor(private _spinner: SpinnerService) {} 

    showSpinner() { 
    this._spinner.start(this.container); 
    setTimeout(() => this._spinner.stop(), 5000); 
    } 
} 

И, наконец, в службе, вы можете просто сделать это:

public start(placeholder) { 
     let elementRef = placeholder; 
     return this.startInside(elementRef, null); 
    }