Как добавить класс на свиток в Angular - PullRequest
Новая
       5

Как добавить класс на свиток в Angular

0 голосов
/ 31 января 2019

Просто снова изучаю Angular.Установил AngularCLI и пытаюсь добавить класс на прокрутке из того, что я имел до использования jquery.Нужно ли использовать [ngClass] для проверки переменной с расположением окна?Я пытаюсь использовать @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');
  }
 });
});

1 Ответ

0 голосов
/ 31 января 2019

Вы можете сделать что-то вроде этого - 

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

...