Angular [ngClass]指令不适用于滚动事件 [英] Angular [ngClass] directive not working on scroll event

问题描述

我正在使用Angular 8和bootstrap 4来构建一个导航栏，该导航栏在发生一定量的滚动时将其颜色从透明更改为深色.我正在使用[ngClass]指令来实现它.根据滚动是否发生，component.ts内部的函数将返回true或false，并且ngClass将相应地执行操作.但不幸的是我无法实现.请在下面查看我的代码:

I'm using Angular 8 and bootstrap 4 to build a navbar which changes its color from transparent to dark when a certain amount to scroll happens. I'm using [ngClass] directive in order to achieve it. The function inside component.ts will return either true or false depending upon the scroll happened or not and ngClass will act accordingly. But I cannot unfortunately achieve it. Kindly take a look at my code below:

HTML

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

角组件.

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

      }

css

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

推荐答案

1. $ event 未在HTML范围内定义；一些说明工作原理
2. 返回类型为: void-您不会返回boolean.

1. $event is not defined in scope of HTML; some explanation how it works
2. Such as return type is : void - you are not returning boolean.

解决此问题的方法是将值(在需要时)设置为类似navbarInversed的值，并在模板中使用它

Approach to solving this would be setting the value(when needed) to something like navbarInversed and use it in the template

请勿直接使用addEventListener-使用 HostListener 或RxJS的 fromEvent

Don't use direct addEventListener - use HostListener or RxJS's fromEvent

此答案是您所需的一个很好的例子

This answer is a good example of what you need

这篇关于Angular [ngClass]指令不适用于滚动事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！