Есть ли способ добавить или удалить директиву, используя условие в угловых рамках?

Question

Я использую селектор директивы при событии щелчка, которое выдает asc и desc, но я хочу удалить эту директиву, когда моя реактивная форма грязная. appSortable это селектор директивы

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

Answer 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>

Answer 2

Вы можете использовать код ниже, чтобы скрыть ваш контент, если форма грязная

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

Answer 3

Наличие двух одинаковых кодов хорошо, только если код 1-строчный. Если он занимает несколько строк, код может стать слишком уродливым слишком рано.

Вы можете иметь входной параметр для вашей директивы. Вы можете передать значение form.dirty в директиву и применить любую логику, какую захотите. Это также спасает вас от дублирования кода.

См. Пример здесь

Редактировать: Сделано решение более общим, каждый компонент может иметь свою собственную функцию и сортировать соответственно.

Answer 4

Не можете ли вы обновить свою директиву, чтобы принять включенное свойство, а затем установить ее в состояние формы?

[isEnabled]="!myForm.dirty"

Ваша директива ничего не делает, если это значение равно false.