应用程序中未捕获的引用错误但它在 Stackblitz 中运行良好

Question

这个proof of concept directive works fine in firefox stackblitz以及导出到vs code的时候；但是，当我尝试将它引入我的应用程序时，它给我一个未捕获的引用错误。这是它在浏览器中的样子：

上下文：我的指令放在父节点上并与子节点交互。它应该可以工作，以便在主机父视图框容器内的（mouseup）上它获得所有子组件的中心 space/positions，计算它们的 x 中线，并滚动到 x 中线最近的组件到 parent/view 框中线。任何见解表示赞赏！谢谢

指令：

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

@Directive({
  selector: '[windowsnap]'
})
export class WindowSnapDirective implements OnInit, AfterViewInit, {



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

  constructor(private el: ElementRef) {console.log('windowsnap constructor')
   }

  ngOnInit(){
   console.log('windowsnap oninit')
  }
  ngAfterViewInit(){
   console.log('windowsnap afterviewinit')
  }

  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() {
    // logging x-scroll history into an array
    this.scrollhistory.unshift(this.parent.scrollLeft);
    console.log(this.scrollhistory)

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


    //  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

你多了一个逗号

export class WindowSnapDirective implements OnInit, AfterViewInit, {

应该是

export class WindowSnapDirective implements OnInit, AfterViewInit {

应用程序中未捕获的引用错误但它在 Stackblitz 中运行良好

Uncaught Reference Error in App yet it is working fine in Stackblitz

typescript

angular-directive

angular