以角度更改特定页面上的导航栏背景颜色

Question

当我访问特定页面（即联系页面）时，我一直在尝试以不同的方式更改导航栏的背景颜色 - 我查看了 ngclasses 以及尝试访问导航但没有运气的不同方式，根据其他 SO 帖子和角度文档。所以我想我会在这里发帖。这是我一直在玩的当前代码

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";
        }
      }

      }

    }

任何想法表示赞赏

Answer 1

您可以在此处使用主题。创建一个服务并在那里添加一个主题。

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 中使用该属性。

现在，当组件加载时，它会将颜色值传递给导航栏并设置其背景。

希望这会有所帮助。

Answer 2

将 [ngClass]="{'contactpage-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类的背景颜色

Answer 3

最后我刚刚创建了第二个导航栏组件，因为我需要在第二个菜单导航上使用比我最初预期的更多的不同链接和按钮/ 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>
`

希望这是有道理的。事实证明，在我的特定情况下，这种简单的方法更实用（因为我需要做的不仅仅是在某些页面上更改背景颜色 - 不同的菜单项/页面路径等），事实证明。抱歉，如果我的英语在此解释中不清楚。