谢邀,这个问题比较简单,首先需要知道 scroll 类型是属于 BOM 相关的知识吧,然后跟 MVVM 模式的关系就不大了,先说答案再说过程,这里我建一个 scroll.directive.ts 指令。
import { Directive, ElementRef, HostListener, Output, EventEmitter } from @angular/core;
@Directive({
selector: [appScroll]
})
export class ScrollDirective {
@Output() scrollChange = new EventEmitter();
constructor(private el: ElementRef) { }
@HostListener(scroll) onScroll() {
this.scrollChange.next(this.el.nativeElement);
}
}
@HostListener(scroll) 就是你标题核心的监听 scroll 事件的标记了,写上这个过后,那么使用这个指令的容器触发滚动事件的时候就会执行 onScroll 函数的内容。这里我还扩展了一个 Output 的事件钩子,向外输出接口。
那么怎么使用呢?看下面:
{{item}}
重点需要关注:
appScroll: 表示使用这个指令
(scrollChange): 表示 Vie