Ajout conditionnel de directives

Question

Je veux ajouter de façon conditionnelle une directive à un composant (où au-disabled , au-accented y au-focused sont les directives) :

<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>

L'approche ci-dessus fonctionne (et est quelque peu acceptable pour moi) parce que (dans mon cas) les propriétés conditionnelles disabled , accented y focused sont mutuellement exclusives - ma question se pose dans les cas où les propriétés conditionnelles ne sont pas mutuellement exclusives (nécessitant un [ngIf] pour chaque permutation d'appliquer la forme infléchie correspondante) :

<!-- 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 -->

L'utilisation de ce qui suit permet à mon code de gérer les combinaisons avec moins de HTML :

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

mais le HTML rendu comporte toujours toutes les directives, chacune portant une valeur de vérité... le composant doit tester la valeur de vérité de chaque directive pour répondre de manière appropriée, mais il serait plus propre de ne même pas appliquer les directives non pertinentes. Existe-t-il une meilleure façon de procéder ?

Answer 1

Ceci n'est pas pris en charge. Seuls les composants peuvent être ajoutés/supprimés de manière conditionnelle.

Ce que vous pouvez faire, c'est passer une valeur pour que la directive sache qu'elle ne doit rien faire.

Voir aussi https://github.com/angular/angular/issues/5332