Angular2 Selector nie pasuje do żadnego elementu w zagnieżdżonych komponentach

Mam dwa zagnieżdżone @Components pl kątowy 2. Widok renderuje się dobrze, ale zawsze powoduje błąd javascript po raz pierwszy. Oto mój kod w Maszynopisie.Angular2 Selector nie pasuje do żadnego elementu w zagnieżdżonych komponentach

HTML App:

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

Komponent aplikacji:

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

Płótno Składnik:

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

Błąd jest:

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

Źródło

2015-10-23 fos.alex

Usuń bootstrap(CanvasComponent) ze swojego pliku CanvasComponent. Próbuje ponownie uruchomić aplikację po raz drugi używając CanvasComponent jako root i szukając elementu my-canvas w kodzie HTML aplikacji. Oczywiście nie może tego znaleźć.

Źródło

2015-10-23 22:23:55 alexpods

OK, teraz załóżmy, że 'CanvasComponent' wymaga' HTTP_PROVIDERS' i innych usług. Jak byś to wstrzyknął? Czuję, że komponent główny powinien dbać o wstrzykiwanie tych usług. – Pablo

@Pablo, po prostu dodaj go do wywołania bootstrap dla aplikacji 'bootstrap (AppComponent, [HTTP_PROVIDERS]);' Następnie dodaj konstruktor do CanvasComponent z parametrem, którego potrzebujesz adnotować za pomocą '@ Inject', np .:' constructor (@Inject (Http) public http: Http) {} ' – svallory

@ statystyka dzięki, osiągnąłem DI, używając własności' provider' wewnątrz komponentu @Component. Zobacz https://github.com/ghpabs/angular2-seed-project/blob/master/src/scripts/todo/todo.component.ts#L12-L17. W ten sposób stwierdzam, że komponent jest lepiej hermetyzowany. Myśli? – Pablo

Rozwiązałem problem, zmieniając nazwę w index.html, należy się upewnić, że znacznik w index.html jest tym samym selektorem, co w głównym elemencie.

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

Źródło

2016-09-27 21:55:45

Angular2 Selector nie pasuje do żadnego elementu w zagnieżdżonych komponentach

Odpowiedz

Powiązane problemy