Angular 5 - динамическое присоединение события клика к динамически создаваемому домену - PullRequest
Новая
       22

Angular 5 - динамическое присоединение события клика к динамически создаваемому домену

0 голосов
/ 26 июня 2018

Я уже 2 дня бьюсь головой об стену, просто чтобы прикрепить событие нажатия к динамически создаваемой кнопке. (click), ng-click, директивы on-click не будут работать на динамических doms, так как эти директивы должны быть скомпилированы.

У меня есть это требование для создания динамических HTML-элементов (кнопка одна), но почему-то я застрял на том, как прикрепить событие. Вызов метода ts для onClick также не будет работать.

Я смотрел тут и там, но безрезультатно. Если кто-то может пролить свет, это очень ценится.

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

Пожалуйста, помогите.

1 Ответ

0 голосов
/ 27 июня 2018

Я решил собственную проблему, используя ngFor / ngRepeat. Хитрость заключалась в том, чтобы сначала объявить переменную ngModel для использования в динамических doms, лучше всего в массиве.

В моем случае мне потребовалась итерация пар ключ-значение, которая динамически генерируется с помощью кнопки добавления нового тега. Вот фрагмент кода. 

<div *ngFor="let tag of resourceTags; index as i" [attr.data-index]="i">
                        <div class="col-sm-5"><input type="text" class="form-control" required="" [(ngModel)]="tag.key" value="{{tag.key}}" placeholder="tag key" /></div>
                        <div class="col-sm-5"><input type="text" class="form-control" required="" [(ngModel)]="tag.value" value="{{tag.value}}" placeholder="tag value" /></div>
                        <div class="col-sm-2" style="padding-top:7px;"><i class="fa fa-minus-circle fa-lg" style="cursor:pointer;" (click)="removeTag(i)"></i></div>
                        <div class="col-sm-12" style="height:5px;">&nbsp;</div>
                    </div>
                    <div class="col-sm-2"><button type="button" class="center btn btn-info btn-xs" (click)="addNewTag()">add new tag</button></div>
                    <div class="col-sm-10">&nbsp;</div>

Где resouceTags определяется как переменная массива [{'key': 'some key', 'value': 'some value'}, ...]

Angular автоматически отобразит указанные элементы ngFor, как только переменная изменит содержимое.

addNewTag() просто добавит элемент к resourceTags, а removeTag сделает наоборот.

Я был глуп, что не думал об этом раньше.

...