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

Question

我可以创建一个导航栏，并在不同的页面上使用它吗？

在第一页上，导航栏是透明的，滚动后会出现，但我希望它在其他页面中是白色和粘性的。

Answer 1

您可以检查url并根据当前路线添加不同的导航组件。

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

Answer 2

如果你在主组件中有一个导航栏，那么你可以用两种方法更新它的粘性行为：

方法1(首选方式(：

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

相反，您在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:中绑定粘性类

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

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

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