DynamicLoaderComponent 未被识别为类型

Question

我无法将 DynamicComponentLoader 注入到组件的构造函数中。我在运行时收到以下错误消息。 Angular 类型定义和 Angular 实现是 v2.0.0-39。它在 angular2.d.ts 文件中被定义为一个接口。

错误：无法解析 MyAppComponent(?, ?) 的所有参数。确保它们都有有效的类型或注释。

编译设置如下：

tsc -w -m commonjs -t es5 --emitDecoratorMetadata -experimentalDecorators app.ts

我错过了什么？

app.ts

/// <reference path="typings/angular2/angular2.d.ts" />
import {Component, View, bootstrap, DynamicComponentLoader, ElementRef } from 'angular2/angular2';

@Component({
    selector:'my-app'
})
@View({
    template: '<h1>Hello {{name }}</h1>'
})
class MyAppComponent{
  name: string;

  constructor(loader: DynamicComponentLoader, elem: ElementRef) {
    this.name='World';
  }
}
bootstrap(MyAppComponent);

index.html

<!-- index.html -->
<html>
  <head>
    <title>Angular 2 Demo</title>
    <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.91/traceur-runtime.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.src.js"></script>
    <script>
      System.config({
        defaultJSExtensions: true 
      });
    </script>
    <script src="https://code.angularjs.org/2.0.0-alpha.39/angular2.dev.js"></script>
  </head>
  <body>  
    <my-app></my-app>
    <script>System.import('app');</script>    
  </body>
</html>

Answer 1

目前您需要使用@Inject。有关详细信息，请参阅 https://github.com/angular/angular/issues/4497。

/// <reference path="typings/angular2/angular2.d.ts" />
import {Component, View, bootstrap, DynamicComponentLoader, ElementRef } from 'angular2/angular2';

@Component({
    selector:'my-app'
})
@View({
    template: '<h1>Hello {{name }}</h1>'
})
class MyAppComponent{
  name: string;

  constructor(@Inject(DynamicComponentLoader) loader: DynamicComponentLoader, @Inject(ElementRef) elem: ElementRef) {
    this.name='World';
  }
}
bootstrap(MyAppComponent);

Answer 2

您的代码运行良好。我试图通过复制和粘贴它来运行它在我的机器上。请参见下面的屏幕截图，它完美地注入了 DynamicComponentLoader。我没有看到代码有任何问题。我能想到的唯一区别是打字稿编译器，因为我使用带有以下参数的 intelij idea 进行编译。 --experimentalDecorators --target es5 --experimentalDecorators --emitDecoratorMetadata true --module commonjs

Screenshot shot of debug

DynamicLoaderComponent 未被识别为类型

DynamicLoaderComponent not recognized as type

typescript

angular