Angular 2 querySelector和addeventlistener

onload = function() { 
    var fcBody = document.querySelector(".fix-column > .tbody"), 
     rcBody = document.querySelector(".rest-columns > .tbody"), 
     rcHead = document.querySelector(".rest-columns > .thead"); 
    rcBody.addEventListener("scroll", function() { 
     fcBody.scrollTop = this.scrollTop; 
     rcHead.scrollLeft = this.scrollLeft; 
    }); 
};

试图以Angular 2的方式计算出上述代码。到目前为止，我已经想出了使用ViewChild，然后尝试添加事件侦听器。我发现是与HostListener但它有一个有点复杂Angular 2 querySelector和addeventlistener

@ViewChild('fcBody') fcBody: any; 
@ViewChild('rcBody') rcBody: any; 
@ViewChild('rcHead') rcHead: any; 

ngAfterViewInit(){ 
    this.rcBody.addEventListener("scroll",() => { 
    this.fcBody.scrollTop = this.rcBody.scrollTop; 
    this.rcHead.scrollLeft = this.rcBody.scrollLeft; 
    }); 
}

我宁愿避免使用指令，如果可能的话，但如果这是最好的解决办法就这样吧。

来源

2017-02-03 Zack Lucky

你认为你的文章传达了足够的信息吗？ – Aravind

我认为是这样，它看起来像我想获得三个DOM元素的持有，然后添加一个事件监听器，其中的一个我应该在角2中执行它。如果你没有得到这个，感觉自由建议修改，以便我的意图更清晰。 –

在'rcBody'元素上使用（scroll）=“scrollHandler（）”和'fcBody'元素上的[scrollTop] =“scrollTop”怎么样？ –

继甘的评论我做了以下

<div #fcBody [scrollTop]="scrollTop" class="tbody"> 
<div #rcHead [scrollLeft]="scrollLeft" class="thead"> 
<div #rcBody (scroll)="scrollHandler($event)" class="tbody"> 

scrollHandler(event){ 
    this.scrollTop = event.srcElement.scrollTop; 
    this.scrollLeft = event.srcElement.scrollLeft; 
}

它完美地工作。本质上，它使可滚动标题的标题以可滚动表格的形式滚动，并且冻结列与可滚动表格垂直滚动。 Upvote他的评论，如果这有助于你。

来源

2017-02-03 20:22:56

Angular 2 querySelector和addeventlistener

回答

相关问题