Angular中如何为按钮组批量绑定相同事件

完全可以实现，常用的有两种实现思路：

方案1：批量选中按钮绑定事件 #

适合按钮固定渲染、后续不会动态新增按钮的场景，直接选中所有符合条件的按钮批量绑定即可。

原生JS实现： #

// 选中btn-toolbar容器下的所有.btn按钮
const btns = document.querySelectorAll('.btn-toolbar .btn');
// 遍历绑定同一个点击事件
btns.forEach(item => {
  item.addEventListener('click', commonClickHandler);
})

// 共用的事件处理函数
function commonClickHandler(e) {
  // e.target为当前点击的按钮实例，可按需获取属性做逻辑
  console.log('点击的按钮内容：', e.target.textContent);
}

jQuery实现： #

$('.btn-toolbar .btn').click(commonClickHandler);

方案2：事件委托（更推荐） #

适合按钮会动态新增、或者按钮数量较多的场景，只需要给父容器绑定一次事件即可，无需后续新增按钮时重复绑定，性能更优。

原生JS实现： #

// 给父容器绑定点击事件
document.querySelector('.btn-toolbar').addEventListener('click', function(e) {
  // 过滤点击目标，仅点击按钮时才触发公共函数
  if(e.target.classList.contains('btn')) {
    commonClickHandler(e);
  }
})

function commonClickHandler(e) {
  console.log('点击的按钮内容：', e.target.textContent);
}

jQuery实现： #

$('.btn-toolbar').on('click', '.btn', commonClickHandler);

内容的提问来源于stack exchange，提问作者moonchild_