[Angular 4有条件地在相同标签上添加指令

Question

我使用的是angular 4，我需要在模板上添加一条指令以验证某些内容。但是我想首先评估是否有其他条件成立，然后再应用该指令。现在我的代码是这样的：

<div *ngIf="groupCheck; else NoDirective" #Directive>
 <li [directive]="controlGroup"><a [routerLink]="['/account/search/', '']"
                    routerLinkActive="active">Accounts</a></li>
 <li [directive]="controlGroup"><a [routerLink]="['/orders', '']"
                    routerLinkActive="active">Orders</a></li>
 <li [directive]="DIFFERENT_GROUP"><a [routerLink]="['/report']" routerLinkActive="active">Reports</a>
                </li>
 <li [directive]="controlGroup"><a [routerLink]="['/anotherStuff']" routerLinkActive="active">anotherStuff</a></li>
</div>
<div *ngIf="!groupCheck; else Directive" #NoDirective>
 <li><a [routerLink]="['/account/search/', '']" routerLinkActive="active">Accounts</a></li>
 <li><a [routerLink]="['/orders', '']" routerLinkActive="active">Orders</a></li>
 <li><a [routerLink]="['/report']" routerLinkActive="active">Reports</a></li>
 <li><a [routerLink]="['/anotherStuff']" routerLinkActive="active">anotherStuff</a></li>
</div>

我想找到一种方法来做这样的事情：

<li *NgIf="condition true add [directive]=controlGroup; else Don't add directive to this line/tag/element"><a [routerLink]="['/account/search/', '']"
                    routerLinkActive="active">Accounts</a></li>
 <li *NgIf="condition true add [directive]=controlGroup; else Don't add directive to this line/tag/element"><a [routerLink]="['/orders', '']"
                    routerLinkActive="active">Orders</a></li>
 <li *NgIf="condition true add [directive]=DIFFERENT_DIRECTIVE; else Don't add directive to this line/tag/element"><a [routerLink]="['/report']" routerLinkActive="active">Reports</a>
                </li>
 <li *NgIf="condition true add [directive]=controlGroup; else Don't add directive to this line/tag/element"><a [routerLink]="['/anotherStuff']" routerLinkActive="active">anotherStuff</a></li>

这样，我将不必只为一个条件重写整个代码，也不需要条件div。有办法吗？

Answer 1

2种可能性：

• 您可以将条件放入指令中（以将数据传递给指令）

• 使用ngIf创建两个元素：

  <div *ngIf="false"></div>
   <div *ngIf="true" myDirective></div>