Отключение моей директивы Angular 6 от DOM

Question

Я разработал директиву "Привязка к компонентам", которая прекрасно работает в Firefox, к сожалению, она тесно связана с DOM, который на самом деле не является "de Angular wey". Как мне это отделить? Я посмотрел на Renderer2, который будет постепенно прекращен Айви, но не могу заставить его работать...

Моя директива помещается на родительский узел и взаимодействует с дочерними узлами. Предполагается, что он будет работать так, чтобы при (mouseup) в контейнере родительского окна хоста он получал центр пространства / позиций всех дочерних компонентов, вычислял их срединные линии X и прокручивал до компонента с серединой X, ближайшей к Родитель / окно просмотра средней линии. Любые идеи приветствуются, особенно если они связаны с развязкой DOM в Angular! Спасибо вам, ребята.

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, чтобы делать то, что вам нужно.