Question

我试图在点击按钮时动态加载微调器组件。

Plunker链接就在这里，

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

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

    return this.startInside(elementRef, null);

我收到以下错误：

elementRef.createComponent不是函数。

请建议！

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);
    }

elementRef.createComponent不是函数

1 个答案: