Il selettore Angular2 non corrisponde a nessun elemento nei componenti nidificati

Ho due nidificati @Components en angular 2. La vista viene visualizzata correttamente ma genera sempre un errore javascript la prima volta. Ecco il mio codice in Typescript.Il selettore Angular2 non corrisponde a nessun elemento nei componenti nidificati

App HTML:

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

App Componente:

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

Tela Componente:

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

L'errore è:

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

fonte

2015-10-23 fos.alex

Rimuovi bootstrap(CanvasComponent) dal tuo CanvasComponent file. Sta tentando di riavviare l'applicazione una seconda volta utilizzando CanvasComponent come root e cercando l'elemento my-canvas nel codice HTML dell'app. Certo che non può trovarlo.

fonte

2015-10-23 22:23:55 alexpods

Ok, ora diciamo che 'CanvasComponent' richiede' HTTP_PROVIDERS' e altri servizi. Come lo inietteresti? Mi sento come se la componente di root dovesse interessare l'iniezione di questi servizi. – Pablo

@Pablo, basta aggiungerlo alla chiamata bootstrap per l'app 'bootstrap (AppComponent, [HTTP_PROVIDERS]);' Quindi aggiungi un costruttore a CanvasComponent con il parametro che hai annotato con '@ Inject', ad es .:' constructor (@Inject (Http) http: Http) pubblico {} ' – svallory

@svallory ringraziamenti, ho completato DI utilizzando la proprietà' providers' all'interno di @Component. Vedi https://github.com/ghpabs/angular2-seed-project/blob/master/src/scripts/todo/todo.component.ts#L12-L17. In questo modo trovo che il componente sia meglio incapsulato. Pensieri? – Pablo

Ho risolto il problema cambiando il nome in index.html, dovresti essere sicuro che il tag in index.html sia lo stesso selettore presente nel componente principale.

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

fonte

2016-09-27 21:55:45

Il selettore Angular2 non corrisponde a nessun elemento nei componenti nidificati

risposta

Problemi correlati