命名指令时的选择器名称答案

【问题标题】：Selectors name when naming directives命名指令时的选择器名称
【发布时间】：2017-04-05 22:33:55
【问题描述】：

我在 Angular2 中看到了指令，以两种似乎工作方式相同的方式命名：

第一个@Directive({ selector: '[myDirective]' })

第二个@Directive({ selector: 'myDirective' })

两者有什么区别？

我还看到了像下面这样的指令，这让我更加困惑

@Directive({
    selector: "[ngModel][typeValidate]",
    host: {
        "(input)": "validate($event)"
    }
})

任何人都可以解释一下吗？

【问题讨论】：

【解决方案1】：

选择器[myDirective] 匹配所有具有属性 myDirective 的元素。
- 示例：<some-tag myDirective="doesnt matter"></some-tag>
选择器myDirective 匹配所有以myDirective 作为标签的元素
- 示例：<myDirective></myDirective>
类似地，[ngModel][typeValidate] 匹配具有ngModel 和myDirective 属性的所有元素。
- 示例：<some-tag myDirective="a" ngModel="b"></some-tag>

【讨论】：

【解决方案2】：

将选择器视为 CSS 选择器，

指定一个 CSS 选择器，在模板。支持的选择器包括 element、[attribute]、.class、并不是（）。不支持父子关系选择器。

所以myDirective 是一个元素选择器

 <myDirective></myDirective>

而[myDirective] 是一个属性选择器

 <div myDirective=""></div>

希望这会有所帮助！

【讨论】：