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

Posted 2023-02-22

【中文标题】Angular 2 \'@Component\' 装饰器是不是总是需要元素名称选择器？

【英文标题】：Does an Angular 2 '@Component' decorator always need an element name selector?Angular 2 '@Component' 装饰器是否总是需要元素名称选择器？

【发布时间】：2017-02-01 18:28:37

【问题描述】：

在此示例中，来自官方 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>

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

【参考方案1】：

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

中的模块的***组件

任何其他类型的组件都需要选择器。否则 Angular 将不知道它应该渲染什么组件。

我还没有听说过属性“ng-component”

[编辑] kit 在他/她的第一条评论中有效地回答了：

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

<div test>

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

【讨论】：

我不想知道组件是否需要选择器。我再次重申，我想知道创建新组件是否总是会产生新的 HTML 元素，或者是否有某种方法可以将组件链接到标准元素，例如 div。我说我会“更喜欢看到类似的东西”ng-component 属性。这纯粹是一个例子..

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

哦！太好了，谢谢。我仍处于概述示例阶段，除了元素选择器之外，还没有看到有很多 Continent 中的任何一个。你应该得到比我现在给你更多的分数。请耐心等待。

【参考方案2】：

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

我想你想要的是directive。

属性指令改变 DOM 元素的外观或行为。

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

【参考方案3】：

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

例子：

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

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