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

时间:2019-04-19 02:05:09

标签: angular angular-directive

我在给asc和desc的click事件上使用指令选择器,但是我想在我的反应式表单脏时删除该指令。 appSortable是指令选择器

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

4 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

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

[isEnabled]="!myForm.dirty"

如果此值为false,请让您的指令不执行任何操作。

答案 2 :(得分:0)

具有两个类似的代码仅在代码为1班轮的情况下可以。如果它跨越多行,那么代码可能会变得太丑陋。

您可以在指令中输入参数。您可以将form.dirty的值传递给指令,并在其中应用所需的任何逻辑。它还可以避免重复代码。

请参见示例here

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

答案 3 :(得分:0)

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

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