我有两个嵌套的 @Components en angular 2。 View 呈现得很好，但它总是第一次抛出 javascript 错误。
这是我在 Typescript 中的代码。
应用 HTML:
<body>
<my-app>loading...</my-app>
</body>
应用组件:
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 组件:
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);
错误是:
EXCEPTION: The selector "my-canvas" did not match any elements
最佳答案
从 CanvasComponent 文件中删除 bootstrap(CanvasComponent)。它尝试使用 CanvasComponent 作为根并在您的 App HTML 中查找 my-canvas 元素来第二次引导应用程序。当然找不到了。
关于Angular2 选择器不匹配嵌套组件中的任何元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33310222/