创建一个导航栏并在不同风格的不同页面上使用它答案

【问题标题】：Create one navbar and use it on different pages with different style创建一个导航栏并在不同风格的不同页面上使用它
【发布时间】：2022-02-08 00:41:23
【问题描述】：

我可以创建一个导航栏并在具有不同风格的不同页面上使用它角度？

在第一页上，دnavbar 是透明的并在滚动后出现，但我希望它在其他页面的其余部分是白色和粘性的。

【问题讨论】：

可以根据当前路由应用样式和属性

标签： html css angular

【解决方案1】：

可以查看url，根据当前路由添加不同的导航组件。

constructor(private router: Router ) {
   console.log(this.router.url); //route name
}

【讨论】：

【解决方案2】：

如果主组件中有导航栏，则可以通过 2 种方法更新其粘性行为：

方法一（首选方式）：

假设您已经有很多页面希望您的导航栏具有粘性或透明性。转到每个页面并更改一些配置非常耗时。

相反，您在app.component.ts 中订阅Router 的NavigationEnd 事件

 constructor(private router: Router) {}

  setNavSticky=true; //Default to true if we have many pages

  ngOnInit() {
    this.router.events.pipe(
      filter(ev=>ev instanceof NavigationEnd)
    ).subscribe((navEndEvent:NavigationEnd)=>{
      if(navEndEvent.url.includes('/home')){
        //Add more pages in condition for which navbar should not be sticky
        this.setNavSticky=false;
      }
      else{
        this.setNavSticky=true;
      }
      
    })
  }

在app.component的HTML中绑定sticky类：

<nav class="navbar" [class.sticky]="setNavSticky">
  <header>My main navbar</header>
  ...
</nav>

方法 2： 在根级别创建一个实用服务，该服务具有属性 isNavbarSticky。所有想要将其设置为 false 的页面都可以通过将其注入到其组件文件中来实现。

使用方法 2，您必须在不需要粘性导航栏的页面中手动设置/取消设置 isNavbarSticky。

【讨论】：