命名指令时选择器名称

Question

我在Angular2中看到了指令，可以通过两种方式给出名称，这两种方式看起来是一样的：

  

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

     

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

这两者的区别是什么？

我也看过如下的指令，这让我更加困惑

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

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

Answer 1

selector装饰器的@Directive属性为CSS selector - see "Directive Configuration" at the cheatsheet。并且，如此：

• 选择器[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>

Answer 2

将选择器视为CSS选择器，

  

指定一个CSS选择器，用于在a中标识此指令   模板。支持的选择器包括element，[attribute]，。class，   并不是（）。不支持父子关系选择器。

所以myDirective是一个元素选择器

 <myDirective></myDirective>

和[myDirective]是属性选择器

 <div myDirective=""></div>

希望这会有所帮助!!