Ionic2, ion-range 自定义范围引脚的内容答案

【问题标题】：Ionic2, ion-range custom content of the range pinIonic2, ion-range 自定义范围引脚的内容
【发布时间】：2018-07-23 20:11:12
【问题描述】：

我将ion-range 与pin 和steps 一起使用。我在范围引脚中获得了当前值，但我想在它旁边添加/附加一些文本。

到目前为止，在 ionic API 和文档中，我没有找到修改范围引脚内容的方法，所以我正在考虑可能通过代码附加一个跨度，但到目前为止我知道使用 .append() 函数来自 jQuery。 range pin的html是：

<div class="range-pin" role="presentation">1</div>

所以我想这样显示：

<div class="range-pin" role="presentation">1 item</div>

【问题讨论】：

标签： ionic-framework ionic2

【解决方案1】：

我知道这有点晚了，但如果有人遇到这个问题，我找到了以下解决方案：

HTML

<ion-range id="euroRange" debounce="250" pin="true" min="0" max="50" (ionChange)="formDidUpdate()" [(ngModel)]="price" color="secondary"></ion-range>

看看我是如何将一个名为 euroRange 的 id 添加到我的 ion-range 元素中的。

CSS

#euroRange {
    .range-pin:after {
        content: " €";
    }
}

在 euroRage id 中我添加了 .range-pin:after 这意味着我指定的任何内容都应该在 pin 的正常内容之后直接完成。 p>

content我添加了一个空格和€符号。

这里是 result.

【讨论】：

谢谢，试试看。

【解决方案2】：

这是我的解决方案。

注意：我把它放在 ionViewDidEnter 里面。

this._elementRef.nativeElement
  .querySelector('.range-knob-handle')
  .addEventListener('pointermove', function () {
    const value = this.getAttribute('aria-valuenow');
    this.querySelector('.range-pin').textContent = `${value} hours`;
  });

所以这里的主要内容是 const 值是在范围内选择的值。之后，您可以对它做任何您想做的事情，只需设置 range-pin 的 textContent 来修复文本。

【讨论】：