代码之家 › 专栏 › 技术社区 › kushal Baldev

如果组件中已经存在类,则routerLinkActive类不适用

routerlinkactive angular-routerlink angular8 angular-ui-router angular-material

0

kushal Baldev · 技术社区 · 5 年前

我遇到了一个有线问题,我有一个有角度的材料侧边栏,我有用于路由应用程序的按钮,让我把代码放在下面

<div fxLayoutAlign="start stretch">
      <button routerLinkActive="selected"  [routerLinkActiveOptions]="{exact:true}" (click)="btnclick('faculty')" mat-flat-button routerLink="/mainview/faculty">
        {{'sidebar.faculty' | translate}}
      </button>
    </div>

因此,我在css文件中使用按钮和应用的默认样式,如下所示

.example-container button{
    color: #DCDCDC;
    flex-grow: 1;
    height: 60px;
    text-align: left;
    border-bottom: 1px solid;
    background-color: #483d8b;
    font-style: normal;
    font-weight: lighter;
  }

下面是我想在routerLink处于活动状态时应用的样式

.selected{
    color: white;
    flex-grow: 1;
    height: 60px;
    text-align: left;
    border-bottom: 1px solid;
    background-color: #483d8b;
    font-weight: 500;
  }

但选定的样式没有应用,我尝试了各种技巧来应用它,但都无法像使用routerLinkActive#rla=“routerLinkActive”并在ngclass等中应用该条件

但我看到了一种特殊的行为,即如果我删除默认样式,它就会起作用。。。!!!

我不知道原因,但如果我删除默认按钮样式,它就会起作用。

所以,当我搜索类似的帖子时,有人能帮我弄清楚这个解决方案到底需要什么吗,但没有一个对我有效。。!!

0 回复 | 直到 5 年前

1

3

Andrei GÄtej 5 年前

这似乎是CSS特有的问题。

你可能想看看这两篇文章,它们很好地解释了这个话题:

在这种情况下, .example-container button 更多 明确的 比 .selector 因为第一个选择器有一个类和一个元素(0011),而第二个选择器只有一个类(0010)。

一个解决方案是使第二个选择器更具体:

.example-container button.selected { ... }

其具有2个类和一个元素。