有条件地添加指令

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