命名指令时的选择器名称

Question

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

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

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

两者有什么区别？

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

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

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

Answer 1

@Directive装饰器的selector属性是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 个选择器，

Specifies a CSS selector that identifies this directive within a template. Supported selectors include element, [attribute], .class, and :not(). Does not support parent-child relationship selectors.

所以myDirective是一个元素选择器

 <myDirective></myDirective>

并且[myDirective]是一个属性选择器

 <div myDirective=""></div>

希望对您有所帮助！！

命名指令时的选择器名称

Selectors name when naming directives

angular2-directives

angular