有条件地添加指令

Question

我想有条件地向一个组件添加一个指令（其中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总是包含所有带有真值的指令......组件必须测试每个指令的真值以便做出适当的响应，但是甚至不应用无关指令会更清晰。 有一个更好的方法吗？

Answer 1

这不受支持。 只能有条件地添加/删除组件。

你可以做的是传递一个值，使指令意识到它不应该做任何事情。

另见https://github.com/angular/angular/issues/5332