Angular [ngClass] директива не работает для события прокрутки - PullRequest
Новая
       27

Angular [ngClass] директива не работает для события прокрутки

0 голосов
/ 25 января 2020

Я использую Angular 8 и bootstrap 4 для создания панели навигации, которая меняет свой цвет с прозрачного на темный, когда происходит определенное количество прокрутки. Я использую директиву [ngClass], чтобы добиться этого. Функция в component.ts вернет либо true, либо false, в зависимости от того, произошла прокрутка или нет, и ngClass будет действовать соответственно. Но я, к сожалению, не могу этого достичь. Пожалуйста, взгляните на мой код ниже:

HTML

<nav class="navbar navbar-expand-lg fixed-top navbar-transparent" [ngClass]="{'navbar-inverse': scrollEvent($event)}">

angular component.ts 

ngOnInit() {
        window.addEventListener('scroll', this.scrollEvent, true);
    }
scrollEvent = (event: any): void => {

      }

css

.navbar-inverse {
    background-color: #918d8d;
}

1 Ответ

0 голосов
/ 25 января 2020
  1. $ event не определено в области HTML; некоторые объяснения как это работает
  2. Например, тип возвращаемого значения : void - вы не возвращаете boolean.

Подход к решению этой проблемы будет установка значение (при необходимости) к чему-то вроде navbarInversed и использовать его в шаблоне

Не использовать прямое addEventListener - использовать HostListener или Rx JS 's fromEvent

Этот ответ является хорошим примером того, что вам нужно

...