DynamicComponentLoader.loadIntoLocation 不是 Angular2 中的函数错误

Question

我正在尝试使用 DynamicComponentLoader，示例代码如下：

import {Component, View, bootstrap,  OnInit, DynamicComponentLoader} from 'angular2';

...

DynamicComponentLoader.loadIntoLocation(PersonsComponent, itemElement);

当我运行应用程序时，出现错误：

DynamicComponentLoader.loadIntoLocation is not a function

如何使用 class 在 ES6 JavaScript 中使用 DynamicComponentLoader.loadIntoLocation？

Answer 1

DynamicComponentLoader 是 class。它没有任何静态方法loadIntoLocation。但是这个 class 的实例有它。您必须使用依赖注入实例化 DynamicComponentLoader：

import { Component, View, DynamicComponentLoader, ElementRef } from 'angular2/angular2'

@Component({
  selector: 'dc'
})
@View({
  template: '<b>Some template</b>'
})
class DynamicComponent {}

@Component({
  selector: 'my-app'
})
@View({
  template: '<div #container></div>'
})
export class App {

  constructor(
    dynamicComponentLoader: DynamicComponentLoader, 
    elementRef: ElementRef
  ) {
    dynamicComponentLoader.loadIntoLocation(DynamicComponent, elementRef, 'container');
  }
}

见this plunker

UPD

ES6呢，我回答过了

Answer 2

DynamicComponentLoader早就过去了。

https://angular.io/guide/dynamic-component-loader 解释了在较新的 Angular 版本中是如何完成的。

  loadComponent() {
    this.currentAddIndex = (this.currentAddIndex + 1) % this.ads.length;
    let adItem = this.ads[this.currentAddIndex];

    let componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component);

    let viewContainerRef = this.adHost.viewContainerRef;
    viewContainerRef.clear();

    let componentRef = viewContainerRef.createComponent(componentFactory);
    (<AdComponent>componentRef.instance).data = adItem.data;
  }

DynamicComponentLoader.loadIntoLocation 不是 Angular2 中的函数错误

DynamicComponentLoader.loadIntoLocation is not a function error in Angular2

angular