Angular 如何将事件附加到动态添加的HTML元素？

我有一个场景，我从后端获取一个HTML字符串，并使用

[innerHTML]

在HTML上呈现该字符串。我有一个字符串链接：

---

请单击如果可以通过id或类名获取新DOM元素，则可以使用
元素分配事件。addEventListener
：

this.container.nativeElement.innerHTML = "<a class='mylink'>Click to show message</a>";

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

for (let i = 0; i < children.length; i++) {
    children[i].addEventListener("click", (event: Event) => {
        alert("Hello world!");
    });
}

this.container.nativeElement.innerHTML=“
let str=”；
str+=''；
str+='
'；
str+='
'；
str+=''；
str+=''；
str+=''；
str+='
'；
Product.forEach（项目=>{
str+='
'；
str+=''；
str+=''；
str+=''；
str+=''；
str+=''；
str+=''；
str+=''；
str+=''+项目名称+''；
str+=''；
str+=“
”；
});
str+='
'；
str+='添加新'；
str+='
'；
str+='
'；
str+=''；
str+=''；

函数-Add（）、GetXYZ（）、GetABC显示在浏览器的inspect元素中，事件是否不起作用

我附加了ts中的HTML。
如何从angular 6动态调用按钮单击事件

    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 += "<div class='col-4 col-lg-4 col-md-4 col-xs-4 text-left' style='font-weight: bold;' id='div_" + orderId + "'>Product Name</div>"; 
            sData += "<div class='col-4 col-lg-4 col-md-4 col-xs-4 text-center' style='font-weight: bold;'>Price</div>";
            sData += "<div class='col-4 col-lg-4 col-md-4 col-xs-4 text-center' style='font-weight: bold;'></div>";
            sData += "<div class='clearfix'></div>";
            var aTag = document.createElement('a');
            for (var i = 0; i < this.lstOrderItem.length; i++) {
                sData += "<div style='background-color:#fff;padding:10px 0;'>";
                sData += "<div class='col-4 col-sm-4 col-lg-4 col-xs-4 col-md-4'>";
                sData += "<span style='text-align: justify;'>" + this.lstOrderItem[i].productName + "</span>"; /*<b style='color:red;' > (" + this.lstOrderItem[i].productType + ") < /b>*/
                sData += "</div>";

                sData += "<div class='col-4 col-sm-4 col-lg-4 col-xs-4 col-md-4 text-center'>";
                sData += "<span><i class='fa fa-inr'></i> " + this.lstOrderItem[i].providerSellingPrice + "</span>";
                sData += "</div>";

                sData += "<div class='col-4 col-lg-4 col-md-4 col-xs-2 text-center' style='font-weight: bold;'>";
                sData += '<a  id="btn_' + this.lstOrderItem[i].orderItemID + '" data-oid=' + this.lstOrderItem[i].orderItemID + ' class="mylink btn btn-success" style="width:70px;">Pending</a>';
                sData += "</div>";
                sData += "</div>";
                sData += "<div class='clearfix'></div>";
            }

            sData += "<div style='background-color:#BFE7FF;padding:15px 0;'>";
            sData += "<div class='col-6 col-sm-6 col-lg-6 col-xs-6 col-md-6' style='font-weight: bold'>Total Billed Amount</div>";
            sData += "<div class='col-2 col-sm-2 col-lg-2 col-xs-2 col-md-2 pull-right text-right'>";
            sData += "<span><b>Price:</b> <i class='fa fa-inr'></i> " + totalAmount + "</span></div>";
            sData += "<div class='clearfix'></div>";
            sData += "</div>";
          }
          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 = <any>error
      );
    }
    return false;
    } 


ConfirmThisOrder(obj) {
    var orderItemID = obj.target.dataset.oid;
}

ItemDetails（orderId、itemIndex）{
if（$（“#accordionNew”+itemIndex）.closest（“div”）.html（）.indexOf（“div#”+orderId）=-1）{
this.oRequest=新的ORequestParameter（）；
var retrievedObject=localStorage.getItem（'userObject'）；
让userObject=JSON.parse（retrievedObject）作为AdminDashboardModel；
this.oRequest.SellerId=userObject.SellerId；
this.oRequest.OrderStatus=$（“#hdnOrderStatus”）.val（）.toString（）；
this.oRequest.OrderId=OrderId；
this.oRequest.OrderConfirmationFlag='0,1,2'；
让sProviderId=“0”；
如果（this.MultiSelectObjTypeSelected！=未定义）{
让result2=this.MultiSelectObjTypeSelected.map（a=>a.id）；
如果（result2.join（）.length>0）{
sProviderId=result2.join（）；
}
}
this.oRequest.ProviderID=sProviderId；
this.orderService.GetItemDetails（this.oRequest）.subscribe(
lstOrderItem=>{
this.lstOrderItem=lstOrderItem；
var sData=“”；
如果（this.lstOrderItem.length>0）{
sData+=“产品名称”；
sData+=“价格”；
sData+=”；
sData+=”；
var aTag=document.createElement（'a'）；
for（var i=0；i*/
sData+=”；
sData+=”；
sData+=“”+this.lstOrderItem[i].providerSellingPrice+“”；
sData+=”；
sData+=”；
sData+=‘待定’；
sData+=”；
sData+=”；
sData+=”；
}
sData+=”；
sData+=“账单总金额”；
sData+=”；
sData+=“价格：”+总金额+”；
sData+=”；
sData+=”；
}
否则{
$（“#errorMsg”）.removeClass（“隐藏”）；
$（“#errorMsg”）.addClass（“警报危险”）；
$（“#errorMsg”）.html（“未找到任何记录”）；
}
$（“#accordionNew”+itemIndex）.closest（“div”）.html（sData）；
让children=document.getElementsByClassName（“mylink”）；
for（设i=0；i{
this.ConfirmThisOrder（事件）
});
}
},
error=>this.errorMessage=错误
);
}
返回false；
} 
确认此订单（obj）{
var orderItemID=obj.target.dataset.oid；
}
@ConnonrsFan，是的，这是正确的，但他的示例显示了
（单击）
，因此我假设他希望使用角度事件处理程序来处理更改检测。@SonuKapoor-抱歉，在您发布答案之前，我已经删除了我的评论。老实说，我不知道
（单击）是如何操作的
事件与更改检测相关。我认为该机制主要用于属性绑定。在上面显示的事件处理程序中所做的更改将由Angular检测。@Sonukapor-以下是更改检测。
    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 += "<div class='col-4 col-lg-4 col-md-4 col-xs-4 text-left' style='font-weight: bold;' id='div_" + orderId + "'>Product Name</div>"; 
            sData += "<div class='col-4 col-lg-4 col-md-4 col-xs-4 text-center' style='font-weight: bold;'>Price</div>";
            sData += "<div class='col-4 col-lg-4 col-md-4 col-xs-4 text-center' style='font-weight: bold;'></div>";
            sData += "<div class='clearfix'></div>";
            var aTag = document.createElement('a');
            for (var i = 0; i < this.lstOrderItem.length; i++) {
                sData += "<div style='background-color:#fff;padding:10px 0;'>";
                sData += "<div class='col-4 col-sm-4 col-lg-4 col-xs-4 col-md-4'>";
                sData += "<span style='text-align: justify;'>" + this.lstOrderItem[i].productName + "</span>"; /*<b style='color:red;' > (" + this.lstOrderItem[i].productType + ") < /b>*/
                sData += "</div>";

                sData += "<div class='col-4 col-sm-4 col-lg-4 col-xs-4 col-md-4 text-center'>";
                sData += "<span><i class='fa fa-inr'></i> " + this.lstOrderItem[i].providerSellingPrice + "</span>";
                sData += "</div>";

                sData += "<div class='col-4 col-lg-4 col-md-4 col-xs-2 text-center' style='font-weight: bold;'>";
                sData += '<a  id="btn_' + this.lstOrderItem[i].orderItemID + '" data-oid=' + this.lstOrderItem[i].orderItemID + ' class="mylink btn btn-success" style="width:70px;">Pending</a>';
                sData += "</div>";
                sData += "</div>";
                sData += "<div class='clearfix'></div>";
            }

            sData += "<div style='background-color:#BFE7FF;padding:15px 0;'>";
            sData += "<div class='col-6 col-sm-6 col-lg-6 col-xs-6 col-md-6' style='font-weight: bold'>Total Billed Amount</div>";
            sData += "<div class='col-2 col-sm-2 col-lg-2 col-xs-2 col-md-2 pull-right text-right'>";
            sData += "<span><b>Price:</b> <i class='fa fa-inr'></i> " + totalAmount + "</span></div>";
            sData += "<div class='clearfix'></div>";
            sData += "</div>";
          }
          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 = <any>error
      );
    }
    return false;
    } 


ConfirmThisOrder(obj) {
    var orderItemID = obj.target.dataset.oid;
}