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

回答

相關問題