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

Question

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

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

示例：我希望不要让我的HTML代码充斥着非标准元素，会更喜欢之类的东西（NB：ng-angular只是一个我希望看到的例子：

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

并使用了这样的东西：

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

或者像这样的组件装饰器只在你想要创建一个新的HTML元素时使用，然后在上面的例子中坚持使用Listcontroller的普通div？

Answer 1

并不总是需要选择器，例如。你有一个模块的顶级组件，由路由器加载并显示在

中 任何其他类型的组件都需要

选择器。否则，角度不知道它应该呈现什么组件。

我还没有听说过属性＆＃34; ng-component＆＃34;

<强> [编辑] 套件在他/她的第一条评论中得到了有效回答：

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

<div test>

可以是带选择器的组件元素：＆＃39; [test]＆＃39;

Answer 2

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

我认为你想要的是directive。

  

Attribute指令更改DOM元素的外观或行为。

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

之类的事情

Answer 3

只是详细说明：选择器可以是标准的CSS选择器，因此您的HTML可以是非角度中心的。

示例：

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

将匹配<div class="player-list and-possibly-some-other-classes">...</div>（即用角度模板替换div）