JS实现Angular滑块组件

需求说明需求：根据传入的动态数组，生成节点数为数组长度的滑块组件。要求节点的直接长度相同，但显示的值是传入数组的值。例子：输入值为[5]，因为只有一个值，滑块不能拖动，输入值为[5,10,20,30,40,50,55]如下图，两者的区别values不一定相等，展示实现逻辑如下：UI：先画一条线作为滑块，然后根据输入数组的长度动态生成相应的节点数，动态生成节点间的宽度由滑块线的长度÷数组的长度。在线路上叠加生成的点，最后分割。Demo事故处理问题：在实现过程中，遇到一个问题：在父组件页面加载之前，滑块组件的initDynamicMargin()方法已经在执行。此时无法获取滑块的宽度来计算对应的dotMargin解决方法：通过Promise写一个waitElement()方法，在页面滑块加载完成后计算节点间的宽度。代码实现如下：privatewaitElement(selector:string){returnnewPromise((resolve)=>{if(document.querySelector(selector)){resolve();}constobserver=newMutationObserver((mutations)=>{if(document.querySelector(selector)){resolve();observer.disconnect();}});observer.observe(document.body,{childList:true,subtree:true,});});}ngAfterViewInit(){//修复问题：在加载前计算点边距this.waitElement('#container').then(()=>{this.initDynamicMargin();});}Github地址https://github.com/emonZan/an...