要在滚动事件上更改导航栏颜色，可以使用Angular中的[ngClass]结合滚动事件的监听器来实现。以下是一个示例解决方法：

首先，在组件的HTML模板中，使用[ngClass]来绑定导航栏的样式类，例如：

在组件的CSS文件中，定义导航栏滚动时的样式类，例如：

.scrolling-nav {
  background-color: #ff0000; /* 设置导航栏滚动时的背景颜色 */
}

然后，在组件的Typescript文件中，定义一个滚动事件监听器，并在滚动事件发生时更新isScrolling的值。在ngOnInit生命周期钩子函数中添加滚动事件监听器：

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

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent {
  isScrolling: boolean = false;

  @HostListener('window:scroll', [])
  onWindowScroll() {
    this.isScrolling = window.pageYOffset > 0; // 当页面滚动时，更新isScrolling的值
  }
}

在上述代码中，@HostListener('window:scroll')装饰器将滚动事件与onWindowScroll方法绑定。该方法在滚动事件发生时被触发，并更新isScrolling的值。当页面滚动时，isScrolling将被设置为true，导航栏将应用滚动时的样式类。

最后，在组件的模块文件中导入和声明该组件：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { NavbarComponent } from './navbar.component';

@NgModule({
  declarations: [NavbarComponent],
  imports: [CommonModule],
  exports: [NavbarComponent]
})
export class NavbarModule { }

通过以上方法，当页面滚动时，导航栏的背景颜色将根据isScrolling的值进行更改。