Question

在窗口滚动中如何捕获滚动值并更改Angular 2中DOM中某个组件的位置？我发现可以使用@HostListener，但它对我不起作用，我使用以下代码：

   import { Component, OnInit, HostListener } from '@angular/core';

@Component({
  selector: 'app-submenu',
  templateUrl: './submenu.component.html',
  styleUrls: ['./submenu.component.scss'],
  inputs : ['menuItems']
})
export class SubmenuComponent implements OnInit {
  public menuItems;
  constructor() { }

  ngOnInit() {
  }

    @HostListener('document:scroll', ['$event']) onScrollEvent($event){
      console.log($event);
      console.log("scrolling");
    } 
}

在Anguler 2中捕获dom事件（如滚动，调整大小等）的最佳方法是什么？

Answer 1

您已经在使用一种好方法：@Hostlistener。为了使它工作，最好编写一个添加监听器的指令。

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

@Directive({ selector: '[scroll]' })
export class TrackScrollDirective {

   constructor(private el: ElementRef) {
   }
   @HostListener('document:scroll', []){
   onScroll(): void {
     this.el.nativeElement.setAttribute('style','position:fixed')
   }
}

确保元素具有overflow:scroll

Answer 2

@Vega感谢您的帮助，我尝试了您的建议，最后通过替换详细文档，以下是我的可行代码：

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

@Directive({ selector: '[scroll]' })
export class TrackScrollDirective {

   constructor(private elRef: ElementRef) {
   }

   @HostListener('body:scroll', ['$event'])
   onScrollEvent($event){
     this.elRef.nativeElement.setAttribute('style','top:500px');
   }
}

再次感谢您的帮助。

在窗口滚动更改角度2的组件样式？

2 个答案: