Angular2セレクタが入れ子になっているコンポーネントのどの要素とも一致しません

2つの入れ子になっています@Components角度2。ビューはうまくレンダリングされますが、最初は常にjavascriptエラーがスローされます。私のコードはTypescriptです。Angular2セレクタが入れ子になっているコンポーネントのどの要素とも一致しません

アプリのHTML：

<body> 
    <my-app>loading...</my-app> 
</body>

アプリケーションコンポーネント：

import {bootstrap, Component} from 'angular2/angular2'; 
import {CanvasComponent} from "./CanvasComponent"; 

@Component({ 
    selector: 'my-app', 
    template: ` 
     <h1>{{title}}</h1> 
     <h2>My Games</h2> 
     <div> 
     <my-canvas></my-canvas> 
     </div> 
    `, 
    directives: [CanvasComponent] 
}) 

class AppComponent { 
} 

bootstrap(AppComponent);

キャンバスコンポーネント：

import {bootstrap, Component, View} from 'angular2/angular2'; 

@Component({ 
    selector: 'my-canvas' 
}) 

@View({ 
    template: ` 
    <div> 
    <span>Balls:</span> 
    <div>{{canvas.length}}</div> 
    </div> 
    ` 
}) 

export class CanvasComponent { 
    canvas = [1,2,3]; 
} 

bootstrap(CanvasComponent);

エラーは次のとおりです。

EXCEPTION: The selector "my-canvas" did not match any elements

出典

2015-10-23 fos.alex

CanvasComponentファイルからbootstrap(CanvasComponent)を削除してください。 CanvasComponentをルートとし、アプリケーションのHTMLにmy-canvas要素を探して、アプリケーションを2回目のブートストラップしようとしています。もちろんそれを見つけることはできません。

出典

2015-10-23 22:23:55 alexpods

さて、今のは言わせ 'CanvasComponent'は' HTTP_PROVIDERS'やその他のサービスを必要とします。どのようにそれを注入しますか？ルートコンポーネントがこれらのサービスを注入するのに気を付けるような気がします。 – Pablo

@Pablo、あなたのアプリケーションのブートストラップコールにそれを追加する 'bootstrap（AppComponent、[HTTP_PROVIDERS]）;'次に、 '@ Inject'で注釈が必要なパラメータを使ってCanvasComponentにコンストラクタを追加します：' constructor（@Inject （Http）public http：Http）{} ' – svallory

@svalloryありがとうございました、私は@Component内部の' providers'プロパティを使ってDIを達成しました。 https://github.com/ghpabs/angular2-seed-project/blob/master/src/scripts/todo/todo.component.ts#L12-L17を参照してください。このようにして、コンポーネントのカプセル化が改善されています。思考？ – Pablo

index.htmlの名前を変更して問題を解決しましたが、index.htmlのタグがメインコンポーネントのタグと同じであることを確認してください。

<html> 
     <head> 
     <title>Angular 2 QuickStart</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="stylesheets/styles.css"> 
     <!-- 1. Load libraries --> 
     <!-- Polyfill(s) for older browsers --> 
     <script src="node_modules/core-js/client/shim.min.js"></script> 
     <script src="node_modules/zone.js/dist/zone.js"></script> 
     <script src="node_modules/reflect-metadata/Reflect.js"></script> 
     <script src="node_modules/systemjs/dist/system.src.js"></script> 
     <!-- 2. Configure SystemJS --> 
     <script src="systemjs.config.js"></script> 
     <script> 
     System.import('app').catch(function(err){ console.error(err); }); 
     </script> 
     </head> 
     <!-- 3. Display the application --> 

     <body> 
     <my-app>Loading...</my-app> <!-- THIS TAG SHOULD BE THE SAME THAT THE SELECTOR IN THE MAIN COMPONENT --> 
     </body> 
    </html> 

<!-- end snippet --> 

    </body> 
</html>

出典

2016-09-27 21:55:45

Angular2セレクタが入れ子になっているコンポーネントのどの要素とも一致しません

答えて

関連する問題