Как условно добавить директивы в Angular 2

Я хочу условно добавить директиву в компонент (где au-disabled, au-accented и au-focused - это директивы):

<template [ngIf]="disabled">
    <au-placeholder au-disabled></au-placeholder>
</template>

<template [ngIf]="accented">
    <au-placeholder au-accented></au-placeholder>
</template>

<template [ngIf]="focused">
    <au-placeholder au-focused></au-placeholder>
</template>

Вышеупомянутый подход работает (и для меня это несколько приемлемо), потому что (в моем случае) условные свойства, disabled, accented и focused являются взаимоисключающими - мой вопрос возникает в тех случаях, когда условные свойства не являются взаимоисключающими (требуя [ngIf] для каждой перестановки применить соответствующую флексированную форму):

<!-- all of the prior <template [ngIf]= ... -->

<!-- plus -->

<template [ngIf]="disabled && accented">
    <au-placeholder au-disabled au-accented></au-placeholder>
</template>

<template [ngIf]="disabled && accented && focused">
    <au-placeholder au-disabled au-accented au-focused></au-placeholder>
</template>

<!-- etc -->

Используя следующее, мой код обрабатывает комбинации с меньшим количеством HTML:

<au-placeholder [au-disabled]="disabled" [au-accented]="accented" [au-focused]="focused"></au-placeholder>

но визуализированный HTML всегда имеет все директивы, каждая из которых несет значение истины... компонент должен проверять истинное значение каждой директивы, чтобы реагировать соответствующим образом, но было бы более чистым даже не применять ненужные директивы. Есть лучший способ сделать это?

Ответ 1