2015-10-08 56 views
1

我無法將DynamicComponentLoader注入到組件的構造函數中。我在運行時收到下面的錯誤消息。 Angular類型定義和Angular實現是v2.0.0-39。它被定義爲angular2.d.ts文件中的一個接口。DynamicLoaderComponent未被識別爲類型

錯誤:無法解析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/[email protected]/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> 
+0

這是一個已知的問題,因爲alpha38(見[#4497](https://github.com/angular/angular/issues/4497)),現在使用'@Inject'。 –

回答

0

此刻你需要使用@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); 
0

您的代碼工作得很好。我試圖通過複製和粘貼來在機器上運行它。看到下面的截圖,它完美地注入了DynamicComponentLoader。我沒有看到任何代碼問題。我能想到的唯一區別是打字稿編譯器,因爲我使用以下參數使用intelij創意編譯。 --experimentalDecorators --target ES5 --experimentalDecorators --emitDecoratorMetadata真正--module CommonJS的

Screenshot shot of debug