为什么所有带有Component选择器的组件都必须在Angular 2应用中使用?

Why do all components with Component selectors have to be used in an Angular 2 application?

本文关键字：Angular 应用 Component 选择器 组件 为什么      更新时间：2023-09-26

请注意，我在这里工作的教程代码，所以不是一切都是严格正确的，但它的工作。大多数时候。

我有一个这样装饰的组件类:

@Component({
    selector: "click-here",
    template: `
        <button (click) = "onClickThere($event)">Click here!</button>
        {{clickMessage}}
    `
})

它是这样使用的:

<body>
    <click-here>Loading...</click-here>
</body>
然后我添加了一个新的组件类，但是它的装饰器有:

selector: "type-here"

当我使用npm start运行应用程序时，我在浏览器中得到大量错误，从:

开始:

The selector "click-here" did not match any elements

为什么每个选择器都必须匹配一个元素?像这样工作是不可行的;必须有一种方法能够有多个Component装饰器，都具有不同的selector值，并且只使用其中的一些。我该如何实现呢?我做错了什么，教程没有包括一个正确的版本?每个Component必须有一个名字或什么?

这只与您使用bootstrap(MyComponent)实例化的元素相关。

如果你引导了一个组件，但它不匹配选择器，Angular就不知道应该把它放在哪里。Angular使用选择器来查找要在DOM中插入组件的位置。

这也意味着您当前只能在页面中引导一个组件一次。当组件被传递给bootstrap()时，有计划支持重写选择器，但目前还不支持。

参见https://github.com/angular/angular/issues/7136

对于MyComponent内部使用的组件，这无关紧要。你可以有任意多的组件，并且只使用你需要的。

组件总是与html标签相关，它就像另一个html。组件包含了一个类，但是有些类可以不是组件。

Component就像另一个html标签，比如span,div，但是是你创建的一个新标签你可以定义它的内部内容。

组件可以像树一样组织。根据上个教程，在使用组件之前，你必须总是有一个主组件(main.ts)，一个模块组件(app.module.ts)和一个应用组件(app.component.ts)，对于index.html也是如此，你可以在教程中看到更多;所以你最好复制所有的文件，如果你只想测试一个组件，你可以在app.component.ts中播放或测试你的组件;但是最好有子组件，大多数时候app.component与my-app tag:

相关联。
<body>
 <my-app>Loading...</my-app>
</body>

教程链接:https://angular.io/docs/ts/latest/tutorial/toh-pt1.html

相关文章：