javascript - Ion RangeSlider 在 Angular 9 项目中没有正确重新加载

Question

我正在尝试将Ion.RangeSlider集成到 Angular 9 项目中以选择一系列日期。我遇到了滑块在最初加载到页面上时工作的问题；但是，当我导航回同一页面时，它不会正确加载。

（编辑以添加路线） 例如，这是我在项目中加载页面时的视图（/#/category?id=13&data_list_id=15），并且滑块按预期加载： 导航到的下一个选项卡（/#/category?id=13&data_list_id=16）也按预期生成滑块： 返回到初始摘要视图 (/#/category?id=13&data_list_id=15) 导致滑块显示为输入框并且无法正常工作。

以下是我的组件中的部分代码，我认为它们是生成滑块的相关部分。

日期slider.component.html

<label [for]="'dateFrom'" class="visuallyhidden">Date From:</label>
<input type="text" [name]="'dateFrom'" [id]="'dateFrom'" [value]="sliderDates[start]" class="date-input js-from" />
<div class="slider-container">
    <input class="sliders" type="text" [id]="'slider'" value="" aria-label="date-range-slider" />
</div>
<label [for]="'dateTo'" class="visuallyhidden">Date To:</label>
<input type="text" [name]="'dateTo'" [id]="'dateTo'" [value]="sliderDates[end]" class="date-input js-to" />

日期滑块.component.ts

  ngOnInit() {
    if (this.dates && this.dates.length) {
      const defaultRanges = this.findDefaultRange(this.dates, this.freq, this.defaultRange, this.dateFrom, this.dateTo);
      // Start and end used for 'from' and 'to' inputs in slider
      // If start/end exist in values array, position handles at start/end; otherwise, use default range
      this.start = defaultRanges.start;
      this.end = defaultRanges.end;
      this.sliderDates = defaultRanges.sliderDates; // Array of dates for the slider i.e. ['2000', '2001', '2002', '2003', '2004', '2005']
    }
  }

  ngAfterViewInit() {
    const $fromInput = $(`#dateFrom`);
    const $toInput = $(`#dateTo`);
    const $range = $(`#slider`).data('ionRangeSlider');
    this.initRangeSlider(this.sliderDates, this.start, this.end, this.freq);
    // Set change functions for 'from' and 'to' date inputs
    this.setInputChangeFunction($fromInput, this.sliderDates, $range, 'from', this.portalSettings, this.freq);
    this.setInputChangeFunction($toInput, this.sliderDates, $range, 'to', this.portalSettings, this.freq);
    this.updateChartsAndTables($fromInput.prop('value'), $toInput.prop('value'), this.freq)
    this.cd.detectChanges(); // cd refers to ChangeDetectorRef
  }

  initRangeSlider(sliderDates: Array<any>, start: number, end: number, freq: string) {
    const updateChartsAndTables = (from, to, freq) => this.updateChartsAndTables(from, to, freq);
    const $fromInput = $(`#dateFrom`);
    const $toInput = $(`#dateTo`);
    $(`#slider`).ionRangeSlider({
      min: 0,
      from: start,
      to: end,
      values: sliderDates,
      prettify_enabled: false,
      hide_min_max: true,
      hide_from_to: true,
      keyboard: true,
      keyboard_step: 1,
      skin: 'round',
      type: 'double',
      onChange: function (data) {
        $fromInput.prop('value', data.from_value);
        $toInput.prop('value', data.to_value);
      },
      onFinish: function (data) {
        updateChartsAndTables(data.from_value, data.to_value, freq);
      }
    });
  }

我曾尝试使用ng2-ion-range-slider包装器，但是当我将其加载到我的模块中时出现以下错误：

这可能意味着声明 IonRangeSliderModule 的库 (ng2-ion-range-slider) 没有被 ngcc 正确处理，或者与 Angular Ivy 不兼容。检查是否有更新版本的库可用，如果有则更新。还可以考虑与图书馆的作者核实，看看图书馆是否应该与 Ivy 兼容。

（奇怪的是，滑块在基本上是相同应用程序的现有项目上运行良好。现有应用程序是在 Angular 版本 2 时开发的。它变成了一个多应用程序项目，其中所有组件、服务和单个应用程序模块都在同一个src文件夹。但是现在 Angular-cli 支持在同一个项目中生成多个应用程序，我正在尝试将它们分开并将可重用/通用组件保留在他们自己的自定义库中。）

标签： javascriptjqueryangularslider