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

Question

我在Angular 2中实现了一个自定义指令，用于表单验证，在很多地方我都看到，在指令定义中，selector属性与多个id相关联 - 例如：

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

多个'[...]'（括号）选择意味着什么？

Answer 1

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

注意：与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>