angular - 命名指令时选择器的名称

Question

我在 Angular2 中见过指令，它们以两种似乎工作原理相同的方式命名:

1st @Directive({ selector: '[myDirective]' })

2nd @Directive({ selector: 'myDirective' })

两者有什么区别？

我还看到过类似下面的指令，这让我更加困惑

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

有人可以透露一些信息吗？

Answer 1

selector @Directive的属性(property)装饰器是 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>