pasar - viewchild angular 6
Angular2 Selector no coincide con ningún elemento en los componentes anidados (2)
Tengo dos @Components en angular anidados 2. La vista se muestra bien pero siempre arroja un error de javascript la primera vez. Aquí está mi código en Typescript.
App HTML:
<body>
<my-app>loading...</my-app>
</body>
Componente de la aplicación:
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);
Componente de lona:
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);
El error es:
EXCEPTION: The selector "my-canvas" did not match any elements
Elimine bootstrap(CanvasComponent) de su archivo CanvasComponent . Está intentando arrancar la aplicación por segunda vez usando CanvasComponent como raíz y buscando el elemento my-canvas en el HTML de la aplicación. Por supuesto que no puede encontrarlo.
Solucioné el problema cambiando el nombre en el index.html, debería asegurarse de que la etiqueta en el index.html sea el mismo selector que en el componente principal.
<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>