角度材质标签-悬停时更改标签

Question

是否存在一种有效的方法来在悬停和单击时调用选项卡更改？

Answer 1

这有点棘手，但是我找不到其他解决方案，这里的Demo可以正常工作。

另一件重要的事情是，您应该分离这些标签侦听器OnDestroy。

ngOnInit() {

  let checkExist = setInterval(() => { 
    // grab the tabs
    let tabs = document.querySelectorAll('.mat-tab-label');

    //if all the tabs rendered
    if (tabs?.length == this.tabs?.length) {

      //run and attach mouseenter listeners
      for(let i = 0; i < tabs.length; i++){
        tabs[i].addEventListener('mouseenter', ()=>{

          //when mouse entering tab - trigger click on it
          tabs[i].click();
        });
      }
      //after listener attached - clear the interval
      clearInterval(checkExist);
    }
  }, 100);  

}