Angular 12：如果单击第一个按钮，则按钮样式不起作用答案

【问题标题】：Angular 12: Button Styles not working if first Button is clickedAngular 12：如果单击第一个按钮，则按钮样式不起作用
【发布时间】：2021-12-02 21:12:02
【问题描述】：

我在网站上编写了导航栏。它有 6 个按钮，当当前路线处于活动状态时突出显示。下图显示了它的外观。 navigation-bar how it should look 但是当我单击顶部按钮时，以下按钮的 css 样式不起作用。 navigation-bar with bug 它仅通过单击最顶部的按钮发生。当我删除顶部按钮时，它出现在“新”顶部按钮上。其他 5 个按钮工作正常。

这是导航栏的代码

.container {
    float: right;
    background-color: rgb(199, 199, 199); 
  }

.btn-nav {
    display: inline-block;
    background: transparent;
    border: 1px solid black;
    height: 60px;
    width: 60px; 
    margin: 11px;
    border-radius: 15px;
    cursor: pointer;
  }
  
  .active-link {
    display: inline-block;
    background: white;
    border: 1px solid black;
    /*padding: 5px 5px;*/
    height: 60px;
    width: 60px; 
    margin: 11px;
    border-radius: 15px;
  }

.img {
  height: 45px;
  width: 45px;
  margin-top: 5px;
}

<div class="container">
        
        <button  routerLink="/filtering" 
                routerLinkActive="active-link"
                #link="routerLinkActive"
                class="btn-nav"
                style="align-content: center;"
                [class.btn-nav]="!link.isActive"><img src="/assets/icons/1.png" alt="filtering operation Icon" class="img"></button>
        <br>
        <button routerLink="/cleaning" 
                routerLinkActive="active-link"
                #link="routerLinkActive"
                class="btn-nav"
                style="align-content: center;"
                [class.btn-nav]="!link.isActive"><img src="/assets/icons/2.png" alt="cleaning Icon" class="img"></button>
        <br>
        <button routerLink="/hood" 
                routerLinkActive="active-link"
                #link="routerLinkActive"
                class="btn-nav"
                style="align-content: center;"
                [class.btn-nav]="!link.isActive"><img src="/assets/icons/3.png" alt="Hood Icon" class="img"></button>
        <br>
        <button routerLink="/?" 
                routerLinkActive="active-link"
                #link="routerLinkActive"
                class="btn-nav"
                style="align-content: center;"
                [class.btn-nav]="!link.isActive"><img src="/assets/icons/4.png" alt="archive Icon" class="img"></button>
        <br>
        <button routerLink="/?" 
                routerLinkActive="active-link"
                #link="routerLinkActive"
                class="btn-nav"
                style="align-content: center;"
                [class.btn-nav]="!link.isActive"><img src="/assets/icons/5.png" alt="Menu Icon" class="img"></button>
        <br>
        <button routerLink="/home" 
                routerLinkActive="active-link"
                #link="routerLinkActive"
                class="btn-nav"
                [class.btn-nav]="!link.isActive">home</button>
        <br>
</div>

【问题讨论】：

在发布角度问题时尝试发布stackblitz代码，代码sn-p似乎不起作用！

标签： html css angular

【解决方案1】：

删除每个按钮的[class.btn-nav]="!link.isActive"，或将margin: 11px; 添加到.active-link ´类。然后它应该工作：

<button  routerLink="/filtering" 
      routerLinkActive="active-link"
      #link="routerLinkActive"
      class="btn-nav"
      style="align-content: center;">
   <img src="/assets/1.jpg" alt="filtering operation Icon" class="img"> 
</button>

【讨论】：