有没有办法在角度框架中使用条件添加或删除指令?

问题描述 投票:1回答:4

我在click事件上使用指令选择器给出了asc和desc,但我想在我的被动表单是脏的时候删除这个指令。 appSortable是指令选择器

<div class="bank-name sort" appSortable sortDirection="asc" (sorted)="onSortedBankName($event)" (click)="sortColumnBy(bankConstants.sortBy.name)"  #Sortable>
angular angular-directive
4个回答
1
投票

为什么不在模板中使用* ngIf?

<div *ngIf="myForm.dirty" class="bank-name sort">
<div *ngIf="!myForm.dirty" class="bank-name sort" appSortable sortDirection="asc" (sorted)="onSortedBankName($event)" (click)="sortColumnBy(bankConstants.sortBy.name)"  #Sortable>

0
投票

您是否可以更新您的指令以接受已启用的属性,然后将其设置为窗体的状态?

[isEnabled]="!myForm.dirty"

如果此值为false,则指令不执行任何操作。


0
投票

只有当代码是1-liner时,有两个相似的代码才是好的。如果它跨越多行,代码可能会过早变得太丑陋。

您可以为指令设置输入参数。您可以将form.dirty的值传递给指令并应用您想要的任何逻辑。它还可以避免重复代码。

参见示例here

编辑:使解决方案更通用,每个组件都可以拥有自己的功能并进行相应的排序。


0
投票

如果表单很脏,您可以使用以下代码隐藏您的内容

<div *ngIf="!YourFormName.dirty" class="bank-name sort" appSortable sortDirection="asc" (sorted)="onSortedBankName($event)" (click)="sortColumnBy(bankConstants.sortBy.name)"  #Sortable>
© www.soinside.com 2019 - 2024. All rights reserved.