angular - 将我的 Angular 6 指令与 DOM 解耦

Question

我做了一个Snap-to-Component Directive这在 Firefox 中运行良好，不幸的是，它与 DOM 紧密耦合，而 DOM 实际上不是“de Angular wey”。我该如何解耦呢？我已经研究过 Renderer2，它将被 Ivy 逐步淘汰，但似乎无法让它工作......

我的指令放在父节点上并与子节点交互。它应该工作，以便在主机父 View 框容器内的(mouseup)上它获得所有子组件空间/位置的中心，计算它们的 x 中线，并滚动到 x 中线最接近的组件父/ View 框中线。任何见解都值得赞赏，特别是如果它们与 Angular 中的 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"});
    }
  }
}

谢谢!

Answer 1

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