单击模板Angular 6中的按钮

Question

我有这个功能：

 windowInfo_(marker, i, data) {
      '<div style="' + this.content_ + '">' +
      '<div>' +
      '<img [src]="' + "'" + this.image + "'" + '"' + ' style="' + this.image_ + '" alt="avatar">' +
      '</div>' +
      '<div style="' + this.details_ + '">' +
      '<div>' +
      '<h5 style="' + this.company_name + '">' + data.company_name + '</h5>' +
      '<i class="fa fa-map-marker" id="' + this.country_city + '">' + data.country + ',' + data.city + '</i>' +
      '</div>' +
      '</div>' +
      '</div>' +
      '<button class="' + this.footerListing + '" type="button" (click)="details(data.id_listing)">Explore Trips</button>'
}

details(id) {
    console.log(id)
}

如您所见，我在此模板内有一个按钮，当我单击它时，details希望触发该功能。但是当我单击它时，没有任何反应。我需要修改什么才能触发功能？感谢您的时间！

Answer 1

您可以通过使用HostListener来做到这一点：-只需为按钮分配ID（即<button id="your_button_id">Click</button>），

现在就可以使用HostListener来检测点击事件：-

@HostListener('click', ['$event'])
onClick(event) {
    if (event.target.id === 'your_button_id') {
        details(id);
    }
}