Angular引入Ripple.js后按钮点击失效问题求助

我之前碰到过类似的情况，大概率是Ripple.js在添加波纹效果时，拦截或干扰了Angular原生的(click)事件触发逻辑。给你几个可行的解决方案试试：

1. 手动初始化Ripple并绑定点击事件 #

避免依赖Ripple的自动绑定逻辑，手动在组件生命周期里初始化波纹，同时直接监听点击事件触发你的搜索方法：

首先修改组件代码：

import { Component, AfterViewInit, ElementRef } from '@angular/core';
import Ripple from 'ripple.js'; // 根据你的实际引入方式调整

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  constructor(private el: ElementRef) {}

  ngAfterViewInit() {
    // 找到目标div并初始化Ripple
    const searchBtnContainer = this.el.nativeElement.querySelector('#btnSearch');
    new Ripple(searchBtnContainer);

    // 直接监听点击事件，确保搜索方法触发
    searchBtnContainer.addEventListener('click', () => {
      this.Search();
    });
  }

  Search() {
    // 你的搜索逻辑代码
    console.log('执行搜索操作');
  }
}

然后调整模板，移除按钮上的(click)绑定，给div加上ripple类：

<div id="btnSearch" class="search_button_right ripple" placement="top" ngbTooltip="Click here to Search">
  <button class="main_serchbtn cursor" type="submit">Search</button>
</div>

2. 用HostListener监听点击事件 #

如果第一种方法没效果，可以尝试用Angular的HostListener全局监听组件内的点击事件，精准匹配搜索按钮后触发方法：

组件代码修改如下：

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  @HostListener('click', ['$event'])
  handleClick(event: MouseEvent) {
    // 判断点击目标是否是搜索按钮（或按钮内部元素）
    const target = event.target as HTMLElement;
    if (target.closest('.main_serchbtn')) {
      this.Search();
    }
  }

  Search() {
    // 你的搜索逻辑代码
    console.log('执行搜索操作');
  }
}

模板保持带ripple类的结构即可：

<div id="btnSearch" class="search_button_right ripple" placement="top" ngbTooltip="Click here to Search">
  <button class="main_serchbtn cursor" type="submit">Search</button>
</div>

3. 检查Ripple.js的配置项 #

有些Ripple库支持配置是否阻止默认事件，你可以查看官方文档，看看有没有类似preventDefault: false的初始化选项。如果有的话，初始化时加上这个配置：

new Ripple(searchBtnContainer, {
  preventDefault: false // 禁止阻止默认事件，让Angular的点击事件正常触发
});

另外提一句，你之前尝试的(ripple-button-click)并不是Angular原生或Ripple.js提供的事件绑定，所以肯定不会生效，不用再试这个写法啦。

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