Angular2指令 - 具有多個ID的選擇器

Question

我正在Angular 2中實現一個自定義指令，用於表單驗證，在許多地方我看到在指令定義中，selector屬性與多個id相關聯 - 例如：

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

多個'[...]'（括號）選擇意味着什么？

Answer 1

與在CSS中一樣，selector [attr]匹配具有名為attr的屬性的元素。 當多個屬性選擇器鏈接在一起時，元素上必須存在所有屬性。

注意：與CSS不同，Angular在執行匹配時會忽略target屬性上的任何[...]或[(...)]綁定括號。

因此，selector [my-custom-validate][ngModel]匹配同時具有my‑custom‑validate屬性和ngModel屬性（包括[ngModel]和[(ngModel)] ）的[(ngModel)] 。 例如，選擇器匹配

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

但不是

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