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

本文介绍了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选择不匹配嵌套组件的任何元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！