将Angular 6指令与DOM解耦

我已经制作了一个在Firefox中运行良好的应用程序，不幸的是，它与DOM紧密耦合，而DOM实际上并不是“de Angular wey”。如何将其解耦？我已经研究过Render2，它将被Ivy淘汰，但似乎无法让它工作

我的指令放在父节点上，并与子节点交互。它的工作原理是：在主机父视图框容器中打开（mouseup），获取所有子组件空间/位置的中心，计算其x中线，并滚动到x中线最靠近父视图框中线的组件。任何见解都值得赞赏，尤其是当它们与角度上的DOM解耦相关时！谢谢大家

windowsnap.directive.ts：

import {Directive,Input, HostListener, ElementRef} from '@angular/core';

@Directive({
  selector: '[windowsnap]'
})
export class WindowSnapDirective {

  scrollhistory = [];
  parent = this.el.nativeElement;

  constructor(private el: ElementRef) { }

  closest(num, arr) {
    let curr = arr[0];
    arr.forEach( (val)=>{
        if (Math.abs(num - val) < Math.abs(num - curr)){
          curr = val
        } 
    });
    return curr;
  }


 @HostListener('mouseup') onMouseUp(){
    this.scrollhistory.unshift(this.parent.scrollLeft);

    // this is to prevent unnecesary scrolls to the same component
    if(this.parent.scrollLeft === this.scrollhistory[1]){return}

    // logging x-scroll history into an array
    console.log(this.scrollhistory)

    //  child element declarations
    let child1El = this.parent.querySelector('child1');
    let child2El = this.parent.querySelector('child2');
    let child3El = this.parent.querySelector('child3');

    // child1 boundaries
    let child1leftBoundary:number = child1El.offsetLeft;
    let child1middleBoundary: number = child1El.offsetWidth*0.5 + child1leftBoundary ;
    let child1rightBoundary: number = child1El.offsetWidth + child1leftBoundary ;
    console.log('child1 Left: ' + child1leftBoundary +', child1 Middle: ' + child1middleBoundary +  ', child1 Right: ' + child1rightBoundary)

    // child2 boundaries
    let child2leftBoundary:number = child2El.offsetLeft;
    let child2middleBoundary: number = child2El.offsetWidth*0.5 + child2leftBoundary ;
    let child2rightBoundary: number = child2El.offsetWidth + child2leftBoundary ;
    console.log('child2 Left: ' + child2leftBoundary + ', child2 Middle: ' + child2middleBoundary + ', child2 Right: ' + child2rightBoundary)

    // child3 boundaries
    let child3leftBoundary:number = child3El.offsetLeft;
    let child3middleBoundary: number = child3El.offsetWidth*0.5 + child3leftBoundary ;
    let child3rightBoundary: number = child3El.offsetWidth + child3leftBoundary ;
    console.log('child3 Left: ' + child3leftBoundary + ', child3 Middle: ' + child3middleBoundary + ', child3 Right: ' + child3rightBoundary)


    //  x view boundaries
    let viewBoxL = ( this.parent.scrollLeft)
    let viewBoxC = ( this.parent.scrollLeft + (this.parent.offsetWidth*0.5))
    let viewBoxR = ( this.parent.scrollLeft + (this.parent.offsetWidth))
    console.log(viewBoxL);
    console.log( this.parent.scrollLeft + (this.parent.offsetWidth*0.5));
    console.log( this.parent.scrollLeft + (this.parent.offsetWidth));


    //positioning calculations
    let a = (viewBoxC-child1middleBoundary)
    console.log('a:' + a)
    let b = (viewBoxC-child2middleBoundary)
    console.log('b:' + b)
    let c = (viewBoxC-child3middleBoundary)
    console.log('c:' + c)


    // make list of children mid points and get closest number to zero
    let closestChildMid = this.closest(0, [a, b, c])
    console.log("closest: " + closestChildMid)

    //if a highest number scroll to childa
    if(closestChildMid === a){
    child1El.scrollIntoView({behavior: "smooth", block: "center"});
    }
    //if b highest number scroll to childb
    if(closestChildMid === b){
    child2El.scrollIntoView({behavior: "smooth", block: "center"});
    }
    //if c highest number scroll to childc
    if(closestChildMid === c){
    child3El.scrollIntoView({behavior: "smooth", block: "center"});
    }
  }
}

import{Directive，Input，HostListener，ElementRef}来自“@angular/core”；
@指示({
选择器：“[windowsnap]”
})
导出类WindowSnapDirective{
滚动历史=[]；
父元素=this.el.nativeElement；
构造函数（私有el:ElementRef）{}
最近（num，arr）{
设curr=arr[0]；
arr.forEach（（val）=>{
if（Math.abs（num-val）

---

谢谢

您应该能够通过访问子节点，这样就不必像以前那样通过主机组件查询它们。否则，我不确定您还可以做什么，因为您总是必须访问DOM节点属性才能完成所需的工作