JS 实现Angular slider组件

需求描述

1. 需求：根据传入的动态数组生成一个节点数为数组长度的slider组件。要求节点直接长度一致，但是显示的值为传入数组的值。
2. 示例：
   传入值为[5], 因为只有一个值，slider无法拖动，显示如下
   传入值为[5，10，20，30，40，50，55]， 数值之间差值不一定相等，显示如下
3. 实现逻辑：
   UI：
   先画一条线作为滑动条，再根据传入数组长度来动态生成相应节点数, 通过滑动条线的长度÷数组长度来动态生成节点之间宽度。 把生成的点覆盖在线上面，最后进行分段。

Demo

slider-component.gif

意外处理

问题：

在实现过程中，有遇到一个问题：在父组件页面还没有加载完的时候，已经在执行slider组件的initDynamicMargin()方法。 此时，无法拿到slider宽度，来计算相应的dotMargin

解决办法：

通过Promise来写一个waitElement()方法，等页面slider加载完成之后，再去计算节点之间的宽度。

代码实现如下：

  private waitElement(selector: string) {
    return new Promise<void>((resolve) => {
      if (document.querySelector(selector)) {
        resolve();
      }
      const observer = new MutationObserver((mutations) => {
        if (document.querySelector(selector)) {
          resolve();
          observer.disconnect();
        }
      });

      observer.observe(document.body, {
        childList: true,
        subtree: true,
      });
    });
  }

    ngAfterViewInit() {
    // Fix issue: Calculate dotmargin before loaded
    this.waitElement('#container').then(() => {
      this.initDynamicMargin();
    });
  }

Github 地址

https://github.com/emonZan/angular-slider-conponent