如何在有角飞镖项目中的路径上设置活动导航链接的样式？

Question

我正在尝试在导航路由器的活动链接上实现边框底部。但是在单击菜单项时，导航文本会被隐藏<a>Link 1</a>。

看看问题所附的图片。

app_component.html

<div class="material-content">
    <header class="material-header shadow">
        <div class="material-header-row">
            <material-button class="material-drawer-button" icon (trigger)="drawer.toggle()">
                <material-icon icon="menu"></material-icon>
            </material-button>
            <span class="material-header-title">YOUR TITLE</span>
            <div class="material-spacer"></div>
        </div>
        <div class="border-bottom"></div>
        <div class="header-nav">
            <div class="material-header-row">
                <nav class="material-navigation">
                    <a [routerLink]="RoutePaths.name.toUrl()"
                       [routerLinkActive]="'active'">Link 1</a>
                </nav>
                <nav class="material-navigation">
                    <a>Link 2</a>
                </nav>
                <nav class="material-navigation">
                    <a>Link 3</a>
                </nav>
                <nav class="material-navigation">
                    <a>Link 4</a>
                </nav>
                <nav class="material-navigation">
                    <a>Link 5</a>
                </nav>
            </div>
        </div>
    </header>
    <router-outlet [routes]="Routes.all"></router-outlet>
</div>

app_component.css

.active {
  background: #039be5;
  height: 2px;
  bottom: 0;
  left: 0;
  position: absolute;
}

Answer 1

您要提供的课程是将整个锚定为蓝色背景，高度或2px，并位于左下角。这可能不是您想要的。

.active {
  background: #039be5;
  height: 2px;
  bottom: 0;
  left: 0;
  position: absolute;
}

您可以将边框底部本身设置为具有样式。或为此样式添加另一个元素并使用。

.active span  {
  ...
}

或

.active:after {
  ...
}

Answer 2

.active a {
  border-bottom: 2px solid;
  border-bottom-color: $mat-blue;
  padding-bottom: $mat-grid *2;
}