当我在angular中访问特定页面(即联系页面)时,我一直在尝试不同的方法来更改导航栏的背景颜色-我已经查看了ngclasses和尝试访问导航的不同方法,就像其他SO帖子和angular文档一样。所以我想我还是在这里发帖吧。下面是我一直在使用的当前代码
navbar.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector : 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls : ['./navbar.component.scss'],
// template: '<img src="assets/img/wr-logo.png">'
template: `
<nav class="navbar navbar-expand-md navbar-fixed-top navbar-light bg-white main-nav" id="navbar navbar-change">
<div class="container">
<div class="navbar-collapse-nil collapse-nil nav-content order-1">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" routerLink="/home/" id="imagelogo"></a>
</li>
</ul>
</div>
<ul class="nav navbar-nav text-nowrap flex-row mx-md-auto order-2 order-md-2" id="center-nav-item">
<div id="hoverDrop">
<div class="dropdown">
<button class="dropbtn">{{product_nav}}</button>
<div class="dropdown-content">
<a routerLink="/hours-of-rest/">{{hor_nav}}</a>
<a routerLink="/on-leave/">{{leave_nav}}</a>
</div>
</div>
</div>
<li class="nav-item">
<a class="nav-link" routerLink="/tour/">{{tour_nav}}</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/pricing/">{{pricing_nav}}</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/resources/">{{resources_nav}}</a>
</li>
</ul>
<div class="ml-auto navbar-collapse-nil collapse-nil nav-content order-3 order-md-3" id="right-nav-item">
<ul class="ml-auto nav navbar-nav">
<li class="nav-item" onclick="blueNav">
<a class="nav-link" routerLink="/contact/" id="contact-nav-element" routerLinkActive="blue-active-link" [routerLinkActiveOptions]="{exact:
true}">{{contact_nav}}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://google.com/" id="login-nav-element">{{login_nav}} <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</div>
</nav>
`
})
export class NavbarComponent implements OnInit {
product_nav:string;
hor_nav:string;
leave_nav:string;
tour_nav:string;
pricing_nav:string;
resources_nav:string;
contact_nav:string;
login_nav:string;
constructor() {
}
ngOnInit() {
this.product_nav = 'Product';
this.hor_nav = 'HoR';
this.leave_nav = 'Leave';
this.tour_nav = 'Tour';
this.pricing_nav = 'Pricing';
this.resources_nav = 'Resources';
this.contact_nav = 'Contact';
this.login_nav = 'Login';
/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
}
// window.onclick =
// function blueNav(){
// var blueTop = document.getElementByTagName("navbar");
// var i;
// for (i = 0; i < blueTop.length; i++) {
// blueTop[i].style.backgroundColor = "blue";
// }
// }
window.onclick =
function blueNav(){
var blueTop = document.getElementById("navbar");
var i;
for (i = 0; i < blueTop.length; i++) {
blueTop[i].style.backgroundColor = "blue";
}
}
}
}
有什么好点子吗?
发布于 2018-09-03 17:37:43
你可以在这里使用主题。创建一个服务并在其中添加一个主题。
class service {
public changeNavColor: subject = new Subject<any>();
}
现在,将此服务注入到您想要使用它的所有页面/组件和导航栏组件中。
现在,在ngOnInit生命周期中,不同组件的挂钩调用
this.service.changeNavColor.next('red');
使用您要在导航栏中设置的颜色。
在导航栏组件中,
this.service.changeNavColor.subscribe((color) => {
this.navColor = color;
})
这将在导航栏组件中设置属性,您可以通过ngStyle绑定或style.background绑定在导航栏组件html中使用该属性。
现在,当组件被加载时,它会将颜色值传递给导航栏并设置其背景。
希望这能有所帮助。
发布于 2021-03-02 19:06:56
将联系人“{‘ngClass=-bg’:rla.isActive }”添加到导航栏
<nav [ngClass]="{'contactpage-bg': rla.isActive }"></nav>
在联系人页面的导航项目中
<li class="nav-item ">
<a #rla="routerLinkActive" routerLinkActive="active-route"
routerLink="/contact">Contact</a>
</li>
并给出contactpage-bg类的背景色
发布于 2018-09-10 07:20:52
最后,我刚刚创建了第二个导航栏组件,因为我需要在第二个菜单导航上比我最初预期的更多不同的链接和按钮/cta。然后,我将适当的导航插入到相应的component.ts页面。其他两个答案也都是很好的方法。
希望这个问题能帮助其他人。我试着用一种简单的路由方法来近似地解决这个问题
也就是说,在pageone.component.ts中会有
@Component({
selector: 'app-one',
templateUrl: './pageone.component.html',
styleUrls : ['./pageone.component.scss'],
template : `
<app-navbar-one></app-navbar-one>
<section id="foo">...</section>
`
在pagetwo.component.ts中
@Component({
selector: 'app-two',
templateUrl: './pagetwo.component.html',
styleUrls : ['./pagetwo.component.scss'],
template : `
<app-navbar-two></app-navbar-two>
<section id="bar">...</section>
`
希望这是有意义的。事实证明,在我的特定情况下,简单的方法更实用(因为我需要做的不仅仅是在某些页面上更改背景颜色-不同的菜单项/页面路线等)。如果我的英语解释不清楚,我深表歉意。
https://stackoverflow.com/questions/52146037
复制相似问题