Question

有没有办法从Ionic alert按钮动态添加和删除课程？

这就是我向Ionic警报添加按钮的方式 -

const alert = this.alertCtrl.create({
  title: 'Alert title',
  cssClass: 'my-alert-class',
  buttons: [
    { text: 'Button 1', handler: data => { return false; }, cssClass: 'some-class' },
    { text: 'Button 2', handler: data => { return false; }, cssClass: 'some-class' }
  ]
});

请注意return false内的handler。这可以防止警报被关闭（这没关系）。

因此，由于警报未关闭，我想更改该按钮的CSS属性，以确定点击了哪一个。

如果没有sol

，我可以选择添加/删除事件侦听器

Answer 1

由于我找不到任何内置的方法，我写了以下内容来实现功能。

const buttonElms: NodeList = document.querySelectorAll('.my-ionic-alert .alert-button-group .alert-button');
// add "click" event listener to each button
for(let index = 0; index < buttonElms.length; index++) {
  buttonElms[index].addEventListener('click', this.selectedButtonHandler);
}

selectedButtonHandler = (event: MouseEvent)=>{
  // handler for clicked button
  let target: any = event.target; // target element
  let siblings: HTMLCollection = target.parentElement.children; // list of all siblings

  for(let index = 0; index < siblings.length; index++){
    siblings[index].classList.remove('selected-button'); // remove selected class from all siblings
  }
  target.classList.add('selected-button'); // add selected class to currently selected item
};

动态更改离子警报按钮类

1 个答案: