Question

我在Mat-menu菜单中使用ng5-sliders，但是每个滑块的高值设置在错误的位置，而不是在滑块的边缘。

我尝试了一些解决方案，例如。 manual refresh 但这不起作用

在stackblitz上有一个例子

Answer 1

我面临着同样的问题。只需将您的超时时间增加到200，即可解决。

import { Component, OnInit, EventEmitter } from '@angular/core';
import { Options } from 'ng5-slider';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  displayMenu = true;
filterElement = [
      {
        value: 0,
        highValue: 15,
        options: {
          floor: 0,
          ceil: 15,
          step: 0.1
        },
      },
      {
        value: 1,
        highValue: 1200,
        options: {
          floor: 1,
          ceil: 1200,
        },
      }];
  manualRefresh: EventEmitter<void> = new EventEmitter<void>();

  ngOnInit() {
  }
  noClickable($event: MouseEvent) {
    $event.stopPropagation();
  }
  onMenuOpen() {
      this.displayMenu = true;
  }
  menuToggle(value: boolean) {

    setTimeout(() => {
        console.log('Test');
        this.manualRefresh.emit();
    }, 200);

  }
}

这里是资源链接，我刚刚将超时从100更改为200

https://stackblitz.com/edit/angular-8c46ta

Answer 2

在MatDialog中使用ng5-slider时，我遇到了同样的问题。我通过在afterOpened的{{1}}订阅中进行手动刷新来解决了该问题。

我建议您订阅菜单触发器的MatDialogRef事件发射器，然后在那进行手动刷新。

Answer 3

该问题是由于Angular动画引起的，可以通过在BrowserAnimationsModule文件内用NoopAnimationsModule替换app.module.ts来解决。缺点是整个应用程序中不会有任何动画。

请参阅以下StackBlitz

理想情况下，应该可以为特定的mat-menu禁用动画，就像对其他组件一样（请参见https://stackoverflow.com/a/45369567/2358409）。不幸的是，这对于mat-menu仍然无效，但是存在一个开放的feature request。

ng5-slider高值设置错误

3 个答案: