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

有条件地添加指令

1 个答案: