Angular2选择不匹配嵌套组件的任何元素 [英] Angular2 Selector did not match any elements in nested Components
本文介绍了Angular2选择不匹配嵌套组件的任何元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有两个嵌套的 @Components 恩角2.视图渲染得很好，但它总是抛出一个JavaScript错误是第一次。
这里是我的打字稿code。
应用HTML：
＆LT;身体GT;
＆LT;我的应用＆GT;加载...＆LT; /我的应用＆GT;
＆LT; /身体GT;
应用程序组件：
进口{引导，组件}从'angular2 / angular2';
进口{} CanvasComponent从./CanvasComponent@零件（{
选择：我的应用，
模板：`
＆LT; H1＆GT;的{{title}}＆LT; / H1＆GT;
＆LT; H2＆gt;我的游戏和LT; / H＆GT;
＆LT; DIV＆GT;
＆LT;我的画布＆GT;＆LT; /我的画布＆GT;
＆LT; / DIV＆GT;
`
指令：[CanvasComponent]
}）类AppComponent {
}引导（AppComponent）;
画布组件：
进口{引导，组件，查看}从'angular2 / angular2';@零件（{
选择：'我的画布
}）@视图（{
模板：`
＆LT; DIV＆GT;
＆LT;跨度＆GT;球：其中; / SPAN＆GT;
＆LT; DIV＆GT; {{canvas.length}}＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
`
}）出口类CanvasComponent {
帆布= [1,2,3];
}引导（CanvasComponent）;
该错误是：
例外：选择我的画布没有匹配的元素
解决方案
删除引导（CanvasComponent）从 CanvasComponent 文件。它尝试使用 CanvasComponent 为根，寻找来引导申请第二次我的画布元素在你的应用程序的HTML。当然，它不能找到它。
I have two nested @Components en angular 2. The view renders just fine but it always throws a javascript error the first time.
Here is my code in Typescript.
App HTML:
<body>
<my-app>loading...</my-app>
</body>
App Component:
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);
Canvas Component:
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);
The error is:
EXCEPTION: The selector "my-canvas" did not match any elements
解决方案
Remove bootstrap(CanvasComponent) from your CanvasComponent file. It's trying to bootstrap application second time using CanvasComponent as a root and looking for my-canvas element in your App HTML. Of course it can't find it.
这篇关于Angular2选择不匹配嵌套组件的任何元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
