Angular2选择不匹配嵌套组件的任何元素

Angular2选择不匹配嵌套组件的任何元素

本文介绍了Angular2选择不匹配嵌套组件的任何元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有两个嵌套的 @Components 恩角2.视图渲染得很好,但它总是抛出一个JavaScript错误是第一次。
这里是我的打字稿code。

应用HTML:

 <身体GT;
    <我的应用>加载...< /我的应用>
< /身体GT;

应用程序组件:

 进口{引导,组件}从'angular2 / angular2';
进口{} CanvasComponent从./CanvasComponent@零件({
  选择:我的应用,
  模板:`
      < H1>的{{title}}< / H1>
      < H2>我的游戏和​​LT; / H>
      < D​​IV>
        <我的画布>< /我的画布>
      < / DIV>
  `
  指令:[CanvasComponent]
})类AppComponent {
}引导(AppComponent);

画布组件:

 进口{引导,组件,查看}从'angular2 / angular2';@零件({
  选择:'我的画布
})@视图({
  模板:`
  < D​​IV>
    <跨度>球:其中; / SPAN>
    < D​​IV> {{canvas.length}}< / DIV>
  < / DIV>
  `
})出口类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选择不匹配嵌套组件的任何元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-02 01:53