Angular 5中mat-slider拖拽时无法实时更新位置问题求助

我之前在Angular 5项目里也碰到过几乎一模一样的滑块问题，结合你给出的版本信息，大概率是动画依赖不匹配或者模块配置不全导致的，给你几个具体的排查和修复步骤：

• 确保正确导入动画模块
  Material滑块的实时拖拽交互依赖Angular动画模块，如果你不小心导入了NoopAnimationsModule（无操作动画模块），就会出现拖拽时手柄不实时移动的情况。请在你的根模块（比如AppModule）或者使用滑块的子模块中，导入并使用BrowserAnimationsModule：

  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
  @NgModule({
    imports: [
      // ...其他模块
      BrowserAnimationsModule
    ]
  })
  export class AppModule { }
  

• 修复版本兼容性问题
  你当前使用的@angular/material@5.0.2和@angular/animations@5.1.2版本不匹配——Angular生态的包需要保持核心版本一致，否则很容易出现这类交互异常。你可以选择两种方案：

  1. 降级动画模块到和Material匹配的版本：

     npm install @angular/animations@5.0.2 --save
     

  2. 升级Material模块到和动画模块一致的5.1.x版本（同时要同步升级@angular/cdk，因为Material依赖CDK）：

     npm install @angular/material@5.1.2 @angular/cdk@5.1.2 --save
     

• 排查样式干扰问题
  有时候自定义的全局样式或者第三方CSS会意外干扰滑块的交互逻辑，比如给滑块或其父元素添加了pointer-events: none，或者修改了滑块手柄的transform属性。你可以先临时移除项目中的自定义样式，测试滑块是否恢复正常，再逐步定位到干扰的样式代码并调整。

• 检查变更检测策略
  如果你的组件使用了ChangeDetectionStrategy.OnPush，可能会导致滑块的状态变更无法实时触发视图更新。可以暂时将组件的变更检测策略改为Default测试：

  import { Component, ChangeDetectionStrategy } from '@angular/core';
  
  @Component({
    // ...其他配置
    changeDetection: ChangeDetectionStrategy.Default
  })
  export class YourComponent { }
  

  如果恢复正常，再调整OnPush模式下的变更触发逻辑（比如手动调用changeDetectorRef.markForCheck()）。

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