如何在 Angular 滚动时添加 class

Question

刚刚又学习了Angular。安装了 AngularCLI 并尝试在使用 jquery 之前的滚动上添加 class。我是否需要使用 [ngClass] 来检查具有 window 位置的变量？我现在正在尝试使用@HostListener。

$(function () {
 $(document).scroll(function () {
   $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
 });
});

$(function() {
 $(document).scroll(function() {
  var x = $(this).scrollTop();
  if (x > 3300) {
    $nav.removeClass('scrolled');
  }
 });
});

Answer 1

你可以这样做-

import { Component, HostListener, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(@Inject(DOCUMENT) private document: Document) { }

  @HostListener('window:scroll', [])
  onWindowScroll() {
    if (document.body.scrollTop > 20 ||     
    document.documentElement.scrollTop > 20) {
      document.getElementById('subTitle').classList.add('red');
      document.getElementById('paragraph').classList.add('green');
    }
  }
  name = 'Angular';
}

查看现场示例：https://stackblitz.com/edit/angular-changeclassonscroll

Answer 2

您可以在 class

中使用此代码

@HostListener('window:scroll', [])
onWindowScroll(event: Event) {
    //set up the div "id=nav"
    if (document.body.scrollTop > 3300 ||
        document.documentElement.scrollTop > 3300) {
        document.getElementById('nav').classList.add('scrolled');
    }
    else {
        document.getElementById('nav').classList.remove('scrolled');
        this.innerWidth = 'auto';
    }
}

Answer 3

上述解决方案有效，但我认为尽可能使用框架更简洁、更合适。

打字稿文件：

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

    scrolled: boolean = false;

    @HostListener("window:scroll", [])
    onWindowScroll() {
        this.scrolled = window.scrollY > 0;
    }
}

Html:

<div [ngClass]="{ className: scrolled }"></div>

Answer 4

在顶部添加对您的 typeScript 文件的导入

{import {Component,HostListener,Directive,HostBinding,Input} from '@angular/core';}

然后在 app.components.ts 中进行一般滚动

添加

export class AppComponent {
  title = 'Tour of Heroes';
  scrolled: boolean = false;

  @HostListener("window:scroll", [])
  onWindowScroll() {
      this.scrolled = window.scrollY > 0;
  }
}

然后添加

[ngClass]="{ 'scroll-add' : 滚动 }"

如何在 Angular 滚动时添加 class

How to add class on scroll in Angular

scroll

ng-class

angular