Angular Material mat-slider对程序化触发事件无响应，旧版本可用如何解决

失效原因 #

1. DOM结构与事件监听目标变更：Angular Material 6之后的版本对mat-slider的DOM结构和事件绑定逻辑做了重构，不再监听.mat-slider-ticks元素的click事件，交互逻辑转而绑定到滑块的轨道（.mat-slider-track）或滑块手柄（.mat-slider-thumb）元素上，原目标元素不再是事件触发的有效载体。
2. 交互逻辑升级：新版本滑块的交互依赖完整的鼠标事件序列（如mousedown → mousemove → mouseup），单一的click事件无法触发完整的滑块值更新逻辑；部分版本还会校验事件是否来自真实用户交互，过滤掉程序化派发的简单事件。

解决办法 #

方法一：使用官方测试工具（推荐用于测试场景） #

Angular Material提供的ComponentHarness测试工具集里，MatSliderHarness可以直接操作滑块，无需手动模拟DOM事件，兼容性和稳定性更强：

import { MatSliderHarness } from '@angular/material/slider/testing';
import { HarnessLoader } from '@angular/cdk/testing';

// 在测试代码中调用
async function setSliderValue(loader: HarnessLoader, value: number) {
  const slider = await loader.getHarness(MatSliderHarness);
  await slider.setValue(value);
}

方法二：模拟正确的交互事件序列（用于组件内模拟场景） #

如果需要在业务组件内模拟交互，需要找到正确的目标元素，并派发完整的鼠标事件序列：

修改后的组件代码：

@Component({
    selector: 'slider-show',
    templateUrl: 'slider-show.html',
})
export class SliderShow {
    constructor(private elementRef: ElementRef) {}

    dispatchFakeEvent() {
        // 定位新版本滑块的事件监听目标：轨道元素
        const sliderTrack = this.elementRef.nativeElement.querySelector('.mat-slider-track');
        const dimensions = sliderTrack.getBoundingClientRect();
        const percentage = 0.5;
        // 以轨道左边界为基准计算目标坐标，确保位置准确
        const targetX = Math.round(dimensions.left + dimensions.width * percentage);
        const targetY = Math.round(dimensions.top + dimensions.height / 2);

        // 模拟真实用户交互的完整事件流
        sliderTrack.dispatchEvent(new MouseEvent('mousedown', {
            bubbles: true,
            cancelable: true,
            view: window,
            clientX: targetX,
            clientY: targetY
        }));

        window.dispatchEvent(new MouseEvent('mousemove', {
            bubbles: true,
            cancelable: true,
            view: window,
            clientX: targetX,
            clientY: targetY
        }));

        window.dispatchEvent(new MouseEvent('mouseup', {
            bubbles: true,
            cancelable: true,
            view: window,
            clientX: targetX,
            clientY: targetY
        }));
    }
}

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