mat-slider绑定focus/blur事件未触发无控制台输出问题咨询

问题根因 #

属于对mat-slider组件事件机制的认知偏差，不是语法写法错误：
<mat-slider>的宿主元素本身不是可聚焦DOM节点，组件内部实际接收焦点的是渲染出来的滑块拖拽交互元素，外层宿主不会接收到原生的focus、blur冒泡事件，所以直接在<mat-slider>标签上绑定事件不会触发任何回调。

可行解决方案 #

方案1：绑定到滑块实际交互节点（官方推荐，适用于v15及以上版本） #

v15版本后Angular Material调整了slider的结构，滑块的可交互元素是带matSliderThumb指令的input节点，直接把事件绑在这个节点上即可正常触发：

<mat-slider class="wba-toolbar-slider pl-2">
  <input matSliderThumb
         (focus)="sliderSelectOnOff(true)"
         (blur)="sliderSelectOnOff(false)">
</mat-slider>

注意：事件必须绑定在带matSliderThumb的input节点上，绑在外层<mat-slider>标签依旧不会生效。 你原有ts代码不需要做任何修改，聚焦、失焦时就会正常打印日志、抛出选中状态事件。

方案2：通过组件实例订阅事件（适用于v15以下旧版本） #

如果是v15之前的旧版slider，没有单独的matSliderThumb节点，可以通过模板引用拿到slider组件实例，订阅组件内部抛出的焦点事件：

<mat-slider #slider class="wba-toolbar-slider pl-2"></mat-slider>

import { AfterViewInit, ViewChild } from '@angular/core';
import { MatSlider } from '@angular/material/slider';

export class YourComponent implements AfterViewInit {
  @ViewChild('slider') slider!: MatSlider;

  ngAfterViewInit(): void {
    // 监听聚焦事件
    this.slider._focus.subscribe(() => this.sliderSelectOnOff(true));
    // 监听失焦事件
    this.slider._blur.subscribe(() => this.sliderSelectOnOff(false));
  }

  sliderSelectOnOff(value: boolean) {
    console.log('sliderSelectOnOff', value);
    this.sliderSelect.emit(value);
  }
}

提示：旧版本的_focus、_blur属于组件内部暴露的事件，大版本升级时需要注意兼容性校验，项目升级到v15+后优先替换为第一种写法。

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