Angular 2 '@Component' 装饰器是否总是需要一个元素名称选择器？

Question

在这个例子中，来自官方 Angular 2 文档，装饰器看起来像这样：

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular App</h1>'
})

示例： 不希望我的 HTML 代码中没有乱七八糟的非标准元素， 更喜欢 一些东西喜欢（注意：ng-angular 只是我想看到的一个例子）：

import { Component } from '@angular/core';
@Component({
  template: '<h1>Wait! Bloody wait some more.</h1>'
})
export class ListComponent { }

并使用了这样的东西：

<div ng-component="List"</div>

或者像这样的 Component 装饰器是否仅在您想要创建新的 HTML 元素时使用，然后在我的示例中为 div 坚持使用普通的 Listcontroller以上？

Answer 1

并不总是需要选择器，例如。您有一个由路由器加载并显示在

中的模块的顶级组件

任何其他类型的组件都需要选择器。否则 angular 不知道应该渲染哪个组件。

我没听说过属性 "ng-component"

[编辑] kit 在 his/her 第一条评论中有效地正确回答：

您必须创建一个包含模板的元素，但它不必是新的 HTML 元素，因为选择器可以是元素、[attribute] 或 class，例如.

<div test>

可能是带有选择器的组件的元素：'[test]'

Answer 2

组件是一个新的 HTML 元素，类似于 <my-component>Hello</my-component>.

我想你想要的是directive。

An Attribute directive changes the appearance or behavior of a DOM element.

所以你可以做类似<div makeItBlue>Blue stuff</div>

的事情

Answer 3

详细说明：选择器可以是标准的 CSS-selector，因此您的 HTML 可以是 non-angular-centric。

示例：

    @Component({
        selector: 'div.player-list',
        ...
    })
    export class PlayerList {
    }

将匹配 <div class="player-list and-possibly-some-other-classes">...</div>（即将 div 替换为您的 angular 模板）

Does an Angular 2 '@Component' decorator always need an element name selector?