如何把点击事件写在html中,关于angular：如何将点击事件添加到打字稿中动态添加的html元素中...

我正在用angular 2构建一个应用程序。我想将click事件添加到动态添加的html元素中。

我定义一个字符串(contentString)，并在此字符串中定义html元素。

var contentString = '' + this.mName + '
' + this.mObject.category + '
Click here for more information Navigate here';

该字符串被放置在html元素中，如下所示：

var boxText = document.createElement("div");

boxText.innerHTML = contentString;

尽管当我检查元素时，它已定义了click事件，但它不会触发。

点击它应该控制台日志

navigate() {

console.log("eeeehnnananaa");

}

但这不起作用。

有人解决吗？

为什么不使用angular添加html？

@MujtabaKably你会怎么做？ 我不知道该怎么写代码

stackoverflow.com/questions/36116770/我认为这将解决您的问题。

编译组件时，Angular处理模板。 以后添加的HTML将不再编译，绑定将被忽略。

您可以使用

constructor(private elRef:ElementRef) {}

ngAfterViewInit() {

// assume dynamic HTML was added before

this.elRef.nativeElement.querySelector('button').addEventListener('click', this.onClick.bind(this));

}

仅供参考-不知道为什么，但是addEventHandler返回了" not a function"错误。 使用了addEventListener，效果很好！

@ firas489非常感谢您的提示。 那是个错误。 我修好了它。

就我而言，我做这些-

var boxText = document.createElement("div");

const contentString = '' + this.mName + '
' + this.mObject.category +

'
Click here for more information ';//as per your code

boxText.innerHTML = contentString;

const button = document.createElement('button');

button.addEventListener('click', (e) => {

this.navigate();//your typescript function

});

button.innerText = 'Navigate here';

boxText.appendChild(button);

Call click event dynamically

ConfirmThisOrder(obj) {

var orderItemID = obj.target.dataset.oid;

}

ItemDetails(orderId, itemIndex) {

if ($("#accordionNew" + itemIndex).closest("div").html().indexOf("div_" + orderId) == -1) {

this.oRequest = new ORequestParameter();

var retrievedObject = localStorage.getItem('userObject');

let userObject = JSON.parse(retrievedObject) as AdminDashboardModel;

this.oRequest.SellerId = userObject.sellerId;

this.oRequest.OrderStatus = $("#hdnOrderStatus").val().toString();

this.oRequest.OrderId = orderId;

this.oRequest.OrderConfirmationFlag = '0,1,2';

let sProviderId ="0";

if (this.MultiSelectObjTypeSelected != undefined) {

let result2 = this.MultiSelectObjTypeSelected.map(a => a.id);

if (result2.join().length > 0) {

sProviderId = result2.join();

}

}

this.oRequest.ProviderID = sProviderId;

this.orderService.GetItemDetails(this.oRequest).subscribe(

lstOrderItem => {

this.lstOrderItem = lstOrderItem;

var sData ="";

if (this.lstOrderItem.length > 0) {

sData +="Product Name";

sData +="Price";

sData +="";

sData +="";

var aTag = document.createElement('a');

for (var i = 0; i < this.lstOrderItem.length; i++) {

sData +="";

sData +="";

sData +="" + this.lstOrderItem[i].productName +""; /* (" + this.lstOrderItem[i].productType +") < /b>*/

sData +="";

sData +="";

sData +="" + this.lstOrderItem[i].providerSellingPrice +"";

sData +="";

sData +="";

sData += 'Pending';

sData +="";

sData +="";

sData +="";

}

sData +="";

sData +="Total Billed Amount";

sData +="";

sData +="Price: " + totalAmount +"";

sData +="";

sData +="";

}

else {

$("#errorMsg").removeClass("hidden");

$("#errorMsg").addClass("alert-danger");

$("#errorMsg").html("There was no record found");

}

$("#accordionNew" + itemIndex).closest("div").html(sData);

let children = document.getElementsByClassName("mylink");

for (let i = 0; i < children.length; i++) {

children[i].addEventListener("click", (event: Event) => {

this.ConfirmThisOrder(event);

});

}

},

error => this.errorMessage = error

);

}

return false;

}