在Angular中实现导航栏在滚动前透明的解决方法可以通过以下步骤：

1. 在Angular项目中创建一个导航栏组件。可以使用Angular CLI命令ng generate component navbar来生成一个名为navbar的组件。

2. 在导航栏组件的HTML模板中，添加一个适当的CSS类来设置导航栏的样式。例如：

这里使用了一个名为transparent的CSS类，用于设置导航栏的透明样式。通过使用[ngClass]指令，并绑定一个变量isNavbarTransparent，可以动态地添加或删除这个CSS类。

3. 在导航栏组件的TypeScript文件中，添加滚动事件监听器，并根据滚动位置来更新isNavbarTransparent变量的值。例如：

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

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

  @HostListener('window:scroll', [])
  onWindowScroll() {
    // 获取滚动位置
    const scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

    // 根据滚动位置来判断是否添加透明样式
    this.isNavbarTransparent = scrollPosition < 100;
  }
}

在这个示例中，使用了@HostListener装饰器来添加一个滚动事件监听器。在滚动事件回调函数中，通过获取滚动位置并判断是否小于100来更新isNavbarTransparent的值。如果滚动位置小于100，则添加透明样式。

4. 在需要显示导航栏的地方使用导航栏组件。例如，在根组件的HTML模板中添加以下代码：

这将在根组件中显示导航栏。

5. 最后，在CSS文件中添加适当的样式来定义导航栏的透明样式。例如：

.navbar.transparent {
  background-color: transparent;
  /* 添加其他透明样式 */
}

这将为具有transparentCSS类的导航栏设置透明背景色。

通过以上步骤，你可以在Angular上实现导航栏在滚动前透明的效果。