时间戳

首页 > 解决方案 > Angular 使用 ng5-slider 时如何防止页面刷新

javascript - Angular 使用 ng5-slider 时如何防止页面刷新

问题描述

我有一个 ng5 滑块，其范围为 0 - 1000，可由用户调节。

当我调整页面底部的滑块时，页面会刷新并将我拉到页面顶部。

我想防止这种情况发生。我该怎么做呢 ？

这是我的代码：

page.component.html

          <div>
            <ng5-slider 
              [(value)]="minValue"
              [(highValue)]="maxValue" 
              (userChangeStart)="onUserChangeStart($event)"
              (userChangeEnd)="onUserChangeEnd($event)"
              [options]="options"
              (userChange)="onUserChange($event)">
            </ng5-slider>
          </div>

page.component.ts

@Component({
  selector: 'app-detail',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.scss']
})
export class DetailComponent implements OnInit {
  logText = '';
  arr_price = [];
  minValue = 0;
  maxValue = 1000;
  options: Options = {
    floor: 0,
    ceil: 1000
  };

  getChangeContextString(changeContext: ChangeContext): string {
    return `${changeContext.value} ${changeContext.highValue}`;
  }

  onUserChangeStart(changeContext: ChangeContext): void {
    this.logText = this.getChangeContextString(changeContext);
  }

  onUserChangeEnd(changeContext: ChangeContext): void {
    this.logText = this.getChangeContextString(changeContext);
    this.apply();
  }

  onUserChange(changeContext: ChangeContext): void {
    this.logText = this.getChangeContextString(changeContext);
    const value = this.logText;
    const value_arr = value.split(' ');
    this.arr_price = value_arr;
  }
}

我试图删除 (userChangeStart) 和 (userChangeEnd) 并且页面没有重新加载，这正是我想要的。

但是，当我手动单击刷新按钮时，滑块值恢复到原来的 0 --------------- 1000。

我在想我必须实现 userChangeStart 和 userChangeEnd 才能持久化数据，但如果我能以某种方式防止从这些处理程序函数中重新加载页面......

标签： javascriptangular

解决方案

我通过在应用程序路由模块中将 scrollPositionRestoration 设置为禁用来修复了该错误。

最初它被设置为启用，因此页面底部的任何点击事件都会将页面带到顶部。

imports: [RouterModule.forRoot(routes, { scrollPositionRestoration: 'disabled' })]

推荐阅读