单击模板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);
    }
}