Angular 在对话框中打开时，角垫滑块将从100设置为0

我有在对话框中打开的角度组件。 我的垫子滑道定义如下：

<mat-slider min="0" max="100" [value]="progressBarValue" (change)="changeProgress($event)"></mat-slider>

在组件html中

<mat-slider min="0" max="100" [value]="progressBarValue"></mat-slider>

---

如果有人知道为什么会这样，请告诉我。非常感谢。

属性指令

ngStyle

与分配的函数（用于mat滑块的多个不同元素）结合使用，在每次滑块值更改时触发CSS转换：

...

//滑块组件摘录
get _trackBackgroundStyles（）：{[key:string]：string}{
const axis=this.vertical？'Y'：'X'；
const scale=this.vertical？`1，${1-this.percent}，1`:`${1-this.percent}，1，1`；
const sign=this.\u应该将mouseCoords（）？'-'：'；
返回{
//scale3d避免了Chrome中的一些渲染问题。请参见#12071。
transform:`translate${axis}（${sign}${this._thumbGap}px）scale3d（${scale}）`
};
}
...

（见完整来源：和）

由于组件实例化和注入对话框的方式不同，在初始化过程中会触发转换。因此，为了实现您想要的行为，CSS动画需要（暂时）禁用

一种（可能非常粗糙但有效）的解决方案是，通过向

mat滑块添加一个类来禁用动画，该类将删除转换，并在初始化完成后删除该类：



/*insert.component.css*/
：：ng deep.失望*{
过渡：无！重要；
}

//insert.component.ts
...
@组成部分({
...
})
导出类InsertComponent实现AfterViewInit{
...  
isAnimationDisabled:布尔值=真；
...
ngAfterViewInit（）{
设置超时（（）=>{
this.isAnimationDisabled=false；
})
}
}

由于初始化过程在本例中非常快地完成，因此需要使用setTimeout，否则将得到一个表达式ChangedTerithasBeenCheckedError。为了避免这种情况，您还可以将ChangeDetectionStrategy更改为OnPush，并在初始化完成后手动触发更改检测

我已经为您创建了一个可供使用的。要在初始化时专门针对mat滑块上的幻灯片动画，您只需覆盖该css片段的转换即可

.mat-slider {
     .mat-slider-thumb-container {
         transition: none;
     }
}

放置在您的组件或全局样式表中。
您可以将您的代码的演示版本上载到某个地方吗？您可以在那里共享您的组件。ts代码？我更新了组件源代码，使其非常简单，并且仍然可以复制它。
        const dialog = {
           currentTime: 0
        };
        const dialogRef = this.dialog.open(InsertComponent, {
            panelClass: 'app-dialog',
            data: dialog,
            autoFocus: false
        });
        dialogRef.afterClosed().subscribe((currentTime) => {
        });

.mat-slider {
     .mat-slider-thumb-container {
         transition: none;
     }
}