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

【问题标题】：DynamicComponentLoader.loadIntoLocation is not a function error in Angular2DynamicComponentLoader.loadIntoLocation 不是 Angular2 中的函数错误
【发布时间】：2015-10-08 12:33:19
【问题描述】：

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

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

...

DynamicComponentLoader.loadIntoLocation(PersonsComponent, itemElement);

当我运行应用程序时，我收到错误：

DynamicComponentLoader.loadIntoLocation 不是函数

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

【问题讨论】：

您是否注入了如documentation 中所示的内容？

标签： angular

【解决方案1】：

DynamicComponentLoader 是类。它没有任何静态方法loadIntoLocation。但是这个类的实例有它。您必须使用依赖注入来实例化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呢，我已经回答了here

【讨论】：

谢谢。我不使用打字稿，而是使用 ES6 和 Babel 进行转译。当我尝试代码时，我收到错误“NoAnnotationError {消息：“无法解析 ProductsComponen 的所有参数……确保它们都有有效的类型或注释。”，堆栈：“错误：无法解析 ProductsC 的所有参数……_view_factory。”
你有 ES6 的示例吗？我不知道如何注入 ES6 类。提前致谢。

【解决方案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;
  }

【讨论】：