angular - elementRef.createComponent 不是函数

Question

我正在尝试通过单击按钮动态加载微调器组件。

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 并将其 fork 到 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);
    }