Angular [ngClass] 指令不适用于滚动事件

Question

我正在使用 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)}">

角度组件.ts

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

      }

css

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

Answer 1

1. $event 未在 HTML 范围内定义；一些explanation它是如何工作的
2. 比如返回类型是: void - 你没有返回boolean。

解决此问题的方法是将值（在需要时）设置为 navbarInversed 之类的值并在模板中使用它

不要直接使用 addEventListener - 使用 HostListener 或 RxJS 的 fromEvent

answer 是您需要的一个很好的例子