Angular2 - DynamicComponentLoader错误

Question

我正在尝试通过angular2动态组件加载器加载另一个组件。

但我总是收到以下错误：

 Cannot resolve all parameters for 'MainComponent'(?, ?). Make sure
 that all the parameters are decorated with Inject or have valid type 
 annotations and that 'MainComponent' is decorated with Injectable.

我的主要成员：

/* ======================================================== *
 * > Imports
 * ======================================================== */
import {
    Component,
    DynamicComponentLoader,
    ElementRef
} from 'angular2/core';
import {LoginComponent} from './login.component.js';



/* ======================================================== *
 * > Main component
 * ======================================================== */
@Component({
    selector: 'mad-index',
    templateUrl: 'resources/views/index.html',
    providers: []
})
export class MainComponent {

    constructor(private dcl: DynamicComponentLoader, private elementRef: ElementRef) {
    }

    ngOnInit() {
        this.dcl.loadIntoLocation(LoginComponent, this.elementRef, 'login');
    }

}

有没有人有想法？ ：/

这是我正在使用的tsconfig：

{
  "disableCompileOnSave": true,
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "app/www/node_modules"
  ]
}

Answer 1

你在配置中设置了一些奇怪的东西，这不是这个问题的根源。 ElementRef 和 DynamicComponentLoader 都需要正确注入才能解析。像这样修改你的构造函数：

constructor(
    @Inject(DynamicComponentLoader) private dcl: DynamicComponentLoader,
    @Inject(ElementRef)private elementRef: ElementRef) {
}

至于你的配置，如果你使用的是system.js，你可能会遗漏以下内容：

System.config({
    defaultJSExtensions: true,
    ...
});