Angular2 指令 - 具有多个 ID 的选择器

Question

我在 Angular 2 中实现了一个自定义指令，用于表单验证的指令，在很多地方我看到在指令定义中选择器属性与多个 ID 相关联 - 对于示例：

@Directive({
    selector: '[my-custom-validator][ngModel]'
})

多次选择“[...]”（括号）是什么意思？

Answer 1

与 CSS 一样，选择器 [attr] 匹配具有名为 attr 的属性的元素。当多个属性选择器链接在一起时，所有属性必须存在于元素上。

注意： 与 CSS 不同，Angular 忽略目标属性上的任何 [...] 或 [(...)] 绑定括号执行比赛。

因此，选择器 [my-custom-validate][ngModel] 匹配具有 my‑custom‑validate 属性和 ngModel 属性的元素（包括 [ngModel] 和 [(ngModel)]）。例如，选择器匹配

 <input type="text" name="username" my-custom-validate [(ngModel)]="model.username">

但不是

 <input type="text" name="username" my-custom-validate>

Angular2 Directive - selector with multiple ids