Angular2 Selector, iç içe geçmiş Bileşenler öğesindeki herhangi bir öğeyle eşleşmedi

İç içe iki iç içe @Components tr açısal 2. Görünüm, yalnızca iyi sonuçlar verir, ancak her zaman bir javascript hatası ilk kez atar. İşte kodumda Typescript.Angular2 Selector, iç içe geçmiş Bileşenler öğesindeki herhangi bir öğeyle eşleşmedi

Uygulama HTML:

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

Uygulama Bileşen:

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);

Tuval Bileşen:

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);

hatadır:

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

kaynak

2015-10-23 fos.alex

bootstrap(CanvasComponent) dosyasını, CanvasComponent dosyanızdan kaldırın. Uygulama, root olarak CanvasComponent kullanarak ve App HTML'nizde my-canvas öğesini aramaya ikinci kez önyükleme yapmaya çalışıyor. Tabii ki bulamıyor.

kaynak

2015-10-23 22:23:55 alexpods

Tamam, şimdi 'CanvasComponent'' HTTP_PROVIDERS' ve diğer hizmetleri gerektirdi diyelim. Nasıl enjekte edeceksin? Kök bileşeninin bu hizmetleri enjekte etmemesi gerektiğini düşünüyorum. – Pablo

@Pablo, sadece App 'bootstrap'inizin (AppComponent, [HTTP_PROVIDERS]) önyükleme çağrısına ekleyiniz;' Daha sonra CanvasComponent 'e,' @ Inject 'ile ek açıkladığınız parametreyle bir kurucu ekleyin, örneğin: constructor (@Inject (Http) public http: Http) {} ' – svallory

@svallory teşekkürler, @Component içindeki' providers' özelliğini kullanarak DI'yi tamamladım. Https://github.com/ghpabs/angular2-seed-project/blob/master/src/scripts/todo/todo.component.ts#L12-L17 sayfasına bakın. Bu şekilde bileşenin daha iyi kapsüllü olduğunu buldum. Düşünceler? – Pablo

Dizin.html'deki adı değiştirerek sorunu çözdüm, index.html dosyasındaki etiketin ana bileşendeki aynı seçici olduğundan emin olmalısınız.

<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>

kaynak

2016-09-27 21:55:45

Angular2 Selector, iç içe geçmiş Bileşenler öğesindeki herhangi bir öğeyle eşleşmedi

cevap

İlgili konular