如何从自定义指令发出?
How to emit from a custom Directive?
我一直在研究检测滚动结束的自定义指令 (Scroller)。我想在滚动结束时发出一个数字(即到达页面末尾)
自定义指令:
import { HostListener , Directive, Output, EventEmitter} from '@angular/core';
@Directive({
selector: '[scroller]'
})
export class scrollDirectiveComponent{
@HostListener('scroll', ['$event'])
@Output() emitPageNumber:EventEmitter<any> =new EventEmitter();
pageNo:any=0;
onScroll(event) {
// do tracking
console.log('scrolled', event.target.scrollTop);
// Listen to click events in the component
let tracker = event.target;
let limit = tracker.scrollHeight - tracker.clientHeight;
console.log(event.target.scrollTop, limit);
if (event.target.scrollTop >= limit) {
console.log('end reached');
this.pageNo++;
this.emitPageNumber.emit(this.pageNo);
}
}
}
我将指令绑定到我的父模板
<div class="alert-list" scroller (emitPageNumber)="fetchPageNumber($event)">
但是当我滚动时出现错误
core.umd.js:3462 异常:http://localhost:3000/app/menu-board/menu.component.html:63:8 中的错误由:self._scrollDirectiveComponent_32_3.emitPageNumber 不是函数
我做错了什么?
@HostListener(...)
后缺少一些代码
@HostListener('scroll', ['$event'])
scrollHandler(event) {
...
}
我一直在研究检测滚动结束的自定义指令 (Scroller)。我想在滚动结束时发出一个数字(即到达页面末尾)
自定义指令:
import { HostListener , Directive, Output, EventEmitter} from '@angular/core';
@Directive({
selector: '[scroller]'
})
export class scrollDirectiveComponent{
@HostListener('scroll', ['$event'])
@Output() emitPageNumber:EventEmitter<any> =new EventEmitter();
pageNo:any=0;
onScroll(event) {
// do tracking
console.log('scrolled', event.target.scrollTop);
// Listen to click events in the component
let tracker = event.target;
let limit = tracker.scrollHeight - tracker.clientHeight;
console.log(event.target.scrollTop, limit);
if (event.target.scrollTop >= limit) {
console.log('end reached');
this.pageNo++;
this.emitPageNumber.emit(this.pageNo);
}
}
}
我将指令绑定到我的父模板
<div class="alert-list" scroller (emitPageNumber)="fetchPageNumber($event)">
但是当我滚动时出现错误 core.umd.js:3462 异常:http://localhost:3000/app/menu-board/menu.component.html:63:8 中的错误由:self._scrollDirectiveComponent_32_3.emitPageNumber 不是函数
我做错了什么?
@HostListener(...)
@HostListener('scroll', ['$event'])
scrollHandler(event) {
...
}