Angular 滑块对齐值

Question

我在弄清楚如何在 Angular 中将 snap 点设置为不同的值时遇到了一些问题。滑块：

<mat-slider 
        min="0" max="90" step="1" tickinterval="auto" thumbLabel (input)="positionChanged(component, 'north.dx', $event.value)" (input)="positionChanged(component, 'north.dy', $event.value)"
></mat-slider>

我需要三个 snap 点：[33, 45, 90].

Link 到文档：Angular mat-slider

有没有办法在 html 中执行此操作？我希望有人能够帮助我。提前致谢！

Answer 1

HTML:

    <mat-slider #screen
      thumbLabel
      [displayWith]="formatLabel"
      tickInterval="1000"
      min="1"
      max="100000"></mat-slider>

    <div id="download">
      <img #canvas>
      <a #downloadLink></a>
    </div>

在component.ts中：

import { Component } from "@angular/core";

@Component({
  selector: "slider-formatting-example",
  templateUrl: "slider-formatting-example.html",
  styleUrls: ["slider-formatting-example.css"]
})
export class SliderFormattingExample {
  @ViewChild('screen') screen: ElementRef;
  @ViewChild('canvas') canvas: ElementRef;
  @ViewChild('downloadLink') downloadLink: ElementRef;
  formatLabel(value: number) {
    if (value >= 1000) {
      console.log(value); // Your slider value is here
      if (value === 33) {
       html2canvas(this.screen.nativeElement).then(canvas => {
         this.canvas.nativeElement.src = canvas.toDataURL();
         this.downloadLink.nativeElement.href = 
         canvas.toDataURL('image/png');
         this.downloadLink.nativeElement.download = '33.png';
         this.downloadLink.nativeElement.click();
       });

      } else if (value === 45) {
      html2canvas(this.screen.nativeElement).then(canvas => {
         this.canvas.nativeElement.src = canvas.toDataURL();
         this.downloadLink.nativeElement.href = 
         canvas.toDataURL('image/png');
         this.downloadLink.nativeElement.download = '45.png';
         this.downloadLink.nativeElement.click();
       });
      } else if (value === 90) {
       html2canvas(this.screen.nativeElement).then(canvas => {
          this.canvas.nativeElement.src = canvas.toDataURL();
          this.downloadLink.nativeElement.href = 
          canvas.toDataURL('image/png');
          this.downloadLink.nativeElement.download = 'marble-diagram.png';
          this.downloadLink.nativeElement.click();
       });
      }
      return Math.round(value / 1000) + "k";
    }
    return value;
  }
}

请找到有效的 stackblitz 答案 here. Now along with it you need to have the html2canvas library installed in the project Please find html2canvas here. Its fairly straight forward to take snapshot in it. I'll share the stackblitz sample of taking snapshot with you here。您需要做的是以编程方式拍摄快照，如果它具有 33,45,90 的值，我在答案中的相关 if 和 else if 块中完成。

Angular 滑块对齐值

Angular Slider snap to value

angular

mat-slider