Angular 5 - 将点击事件动态附加到动态创建的 dom

Question

我已经用头撞墙 2 天了，只是为了将点击事件附加到动态创建的按钮上。 (click)、ng-click、on-click 指令不适用于动态 dom，因为这些指令需要编译。

我有创建动态 html 元素（按钮是一个）的要求，但不知何故我被困在如何附加事件上。在onClick上调用ts方法也不行。

我到处看了看，但无济于事。如果有人能提供帮助，我们将不胜感激。

我正在考虑切换到其他框架，因为我发现 angular 缺少与动态 dom 的事件绑定。我已经厌倦了寻找任何可以做的事情，但是 none.

请帮忙。

Answer 1

我使用 ngFor/ngRepeat 解决了我自己的问题。诀窍是首先声明 ngModel 变量以用于动态 dom，最好是制作数组。

在我的例子中，我需要一个通过添加新标签按钮动态生成的迭代键值对。这是代码片段。

<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'},...][的数组变量=15=]

Angular 将在变量更改内容后立即自动渲染指定的 ngFor 元素。

addNewTag() 只会向 resourceTags 添加一个元素，而 removeTag 则相反。

我真傻，早点没想到这个。

Angular 5 - 将点击事件动态附加到动态创建的 dom

Angular 5 - dynamically attaching click event to dynamically created dom

events

dynamic

click

angular